Объясните структуру действий (actions) в Redux

Действия — это ключевые элементы в 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'));

Действия обеспечивают единообразный способ описания событий, что делает код предсказуемым и легко тестируемым.