Объясните структуру действий (actions) в Redux
Этот вопрос проверяет понимание, что такое действия в Redux, их структура и цель.
Короткий ответ
Действия (actions) в Redux — это обычные JavaScript-объекты, которые описывают, что должно произойти в приложении. Они обязательно содержат поле type, определяющее тип действия, и могут включать дополнительные данные в поле payload. Действия используются для инициирования изменений состояния через редьюсеры.
Длинный ответ
Действия — это ключевые элементы в Redux, которые описывают намерения изменить состояние приложения. Они передаются через функцию dispatch и обрабатываются редьюсерами.
Минимальная структура действия:
const action = { type: 'INCREMENT' };type: Поле type — обязательное, оно определяет тип действия и сообщает редьюсерам, как обрабатывать это действие.
payload: Дополнительные данные, которые передаются вместе с действием. Это могут быть параметры, значения или другие сведения, необходимые для обновления состояния.
const addTodoAction = {
type: 'ADD_TODO',
payload: { text: 'Learn Redux', completed: false },
};Пример использования действия:
Отправка действия:
store.dispatch({ type: 'INCREMENT' });Редьюсер обрабатывает это действие:
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}Для упрощения работы с действиями часто создают action creators — функции, которые возвращают объект действия:
const increment = () => ({ type: 'INCREMENT' });
const addTodo = (text) => ({
type: 'ADD_TODO',
payload: { text, completed: false },
});
store.dispatch(increment());
store.dispatch(addTodo('Learn Redux'));Действия обеспечивают единообразный способ описания событий, что делает код предсказуемым и легко тестируемым.