Как ответить
Redux — это предсказуемый контейнер состояния для JavaScript-приложений. Чаще всего его используют с React, но это не обязательная связка. Основная идея: всё состояние приложения хранится в одном объекте — store, и изменить его можно только через отправку экшенов (action) с помощью диспетчера (dispatch). Никаких мутаций напрямую.
Разберём по порядку.
Store — это объект, который хранит дерево состояния. Создаётся через createStore(reducer). У него три метода: getState(), dispatch(action) и subscribe(listener).
Action — это обычный JavaScript-объект с обязательным полем type. Type — это строка, которая описывает, что произошло. Например: { type: 'ADD_TODO', payload: 'купить молоко' }. Action — это просто описание намерения изменить состояние. Он не содержит логики.
Dispatch — это функция, которая отправляет action в store. Когда мы вызываем store.dispatch(action), Redux передаёт этот action в reducer. Dispatch — единственный способ изменить состояние. Никаких сеттеров, никаких прямых мутаций store.
Reducer — это чистая функция, которая принимает текущее состояние и action, и возвращает новое состояние. Выглядит так:
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, { text: action.payload, completed: false }];
default:
return state;
}
}Reducer должен быть чистой функцией: не мутировать аргументы, не делать сайд-эффектов, всегда возвращать новый объект. Если state не меняется — возвращаем старый.
Как это работает в React. Подключаем Redux через react-redux. Компонент подписывается на store с помощью connect или хуков useSelector/useDispatch. useSelector берёт часть состояния, useDispatch даёт доступ к dispatch. Когда компонент хочет что-то изменить, он вызывает dispatch с action, reducer обрабатывает его, store обновляется, и все подписанные компоненты перерисовываются.
На практике: для асинхронных операций (запросы к API) используют middleware — чаще всего Redux Thunk или Redux Saga. Thunk позволяет диспатчить функции вместо объектов, внутри которых можно делать асинхронные вызовы и потом диспатчить обычные action. Redux Toolkit — это современный стандарт, он упрощает создание store, reducer и action, включая createSlice и createAsyncThunk.
Когда Redux нужен, а когда нет. Redux оправдан, когда у приложения сложное состояние, которое используется в разных частях приложения: корзина в интернет-магазине, данные пользователя, кэш запросов. Для простых форм или локального состояния компонента хватит useState или useReducer. Я обычно смотрю на количество источников правды: если одно и то же состояние нужно в 3+ несвязанных компонентах — Redux упрощает жизнь.