Можете объяснить роль действий, редьюсеров и хранилища в Redux?

Redux построен на трех основных элементах: действия (actions), редьюсеры (reducers) и хранилище (store). Каждый из них выполняет свою уникальную роль:

Действия (Actions):
Действие — это объект, который описывает, что должно произойти в приложении. Оно всегда содержит поле type (тип действия), определяющее, какую операцию нужно выполнить. Действие может также содержать дополнительные данные (payload):

const incrementAction = { type: 'INCREMENT' };
const addTodoAction = { type: 'ADD_TODO', payload: { text: 'Learn Redux' } };

Редьюсеры (Reducers):
Редьюсер — это чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние. Оно обновляет только ту часть состояния, за которую отвечает:

function counterReducer(state = 0, action) {
	switch (action.type) {
		case 'INCREMENT':
			return state + 1;
		default:
			return state;
	}
}

Хранилище (Store):
Хранилище управляет состоянием всего приложения. Оно создается с помощью функции createStore, которая принимает редьюсеры и возвращает объект с методами для работы с состоянием:

import { createStore } from 'redux';

const store = createStore(counterReducer);
console.log(store.getState()); // Получение текущего состояния
store.dispatch({ type: 'INCREMENT' }); // Отправка действия

Поток данных в Redux выглядит так:

• Компонент отправляет действие через dispatch.

• Действие передается редьюсерам через хранилище.

• Редьюсеры возвращают обновленное состояние.

• Хранилище уведомляет подписанные компоненты о новых данных.

Пример полного цикла:

// Редьюсер
function todoReducer(state = [], action) {
	switch (action.type) {
		case 'ADD_TODO':
			return [...state, action.payload];
		default:
			return state;
	}
}
// Хранилище
const store = createStore(todoReducer);
// Отправка действия
store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });
console.log(store.getState()); // [{ text: 'Learn Redux' }]

Совместная работа действий, редьюсеров и хранилища обеспечивает четкую архитектуру и предсказуемость изменений состояния в приложении. Это делает Redux мощным инструментом для управления состоянием в больших приложениях.