Що таке action у Redux?
У Redux поняття action (дія) - це звичайний об'єкт, який описує, що сталося в застосунку.
Action не змінює стан сам - він просто повідомляє reducer'у, яка подія відбулася.
Формально
Action - це об'єкт з обов'язковим полем type, яке описує тип події:
javascript
{ type: 'ADD_TODO' }Можна також передавати додаткові дані (payload), щоб повідомити подробиці про дію:
javascript
{
type: 'ADD_TODO',
payload: { text: 'Купити хліб' }
}Приклад
Припустимо, у нас є reducer для списку задач:
javascript
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload]
case 'REMOVE_TODO':
return state.filter(todo => todo.id !== action.payload.id)
default:
return state
}
}Тепер можна викликати:
javascript
store.dispatch({
type: 'ADD_TODO',
payload: { id: 1, text: 'Купити хліб' }
})Reducer отримає цей action і поверне новий стан.
Правила action'ів
- Action - це просто дані, без логіки.
- Обов'язково має бути поле
type- рядок, який унікально ідентифікує дію. - Action має бути серіалізовним (тобто складатися з простих JS-значень, без функцій, класів, Promise тощо).
- Reducer вирішує, що робити з цим action.
Action creator (створювач дій)
Часто action створюють через спеціальні функції:
javascript
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: { text }
}
}
// Використання:
dispatch(addTodo('Купити молоко'))Це зручно, тому що:
- Можна перевикористовувати action creator'и
- Можна додати валідацію або додаткові обчислення
Підсумок
| Термін | Що це | Приклад |
|---|---|---|
| Action | Опис події | { type: 'LOGIN_SUCCESS', payload: user } |
| Reducer | Функція, яка оновлює стан на основі action | (state, action) => newState |
| Dispatch | Механізм, що відправляє action у store | dispatch({ type: 'LOGOUT' }) |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.