Redux — это предсказуемый контейнер состояния для JavaScript-приложений. Он помогает управлять состоянием приложения централизованно, делая его консистентным, предсказуемым и облегчая отладку.
Основные принципы Redux:
- Единый источник истины: Состояние всего приложения хранится в одном объекте внутри одного Store.
- Состояние только для чтения (Read-only state): Состояние приложения нельзя изменить напрямую. Единственный способ изменить состояние — это отправить (dispatch) Action — простой JavaScript-объект, описывающий, что произошло.
- Изменения происходят с помощью чистых функций (Reducers): Для определения того, как состояние изменяется в ответ на Actions, используются Reducers. Reducer — это чистая функция, которая принимает текущее состояние и Action, и возвращает новое состояние.
Ключевые компоненты Redux:
- Store: Объект, который объединяет состояние, Action и Reducers. Он хранит состояние приложения, предоставляет методы для получения текущего состояния (
getState), отправки Actions (dispatch) и подписки на изменения (subscribe).
- Action: Простой JavaScript-объект, описывающий событие, которое произошло. У него обязательно должно быть свойство
type, обычно строковое. Могут содержать полезную нагрузку (payload) с данными.
- Reducer: Чистая функция, которая определяет, как состояние приложения изменяется в ответ на Action. Принимает текущее состояние и Action, возвращает новое состояние. Не должна мутировать исходное состояние, выполнять побочные эффекты (side effects) или вызывать нечистые функции (например,
Math.random()).
- Dispatcher: Метод Store (
dispatch) для отправки Actions.
- Selector: Функция, которая принимает состояние Store в качестве аргумента и возвращает часть состояния. Часто используется в связке с React-Redux (
useSelector).
Пример простого Action и Reducer:
javascript
javascript
javascript
Redux часто используется с библиотеками для работы с UI, такими как React (через React-Redux), для связывания компонентов с состоянием Store. Для сложных асинхронных операций (например, запросов к API) используются middleware (например, redux-thunk или redux-saga).