Что происходит в Redux после dispatch экшена и как обновляется состояние?

Что происходит в Redux после диспатча экшена?

• Redux — централизованное хранилище состояния
• При диспатче отправляется объект экшена, содержащий тип и данные
• Экшен передаётся в редьюсер, представляющий собой чистую функцию
• Редьюсер получает текущее состояние и экшен → формирует новое состояние
• Redux сопоставляет прежнее состояние с новым
• При обнаружении изменений обновляет стор и уведомляет подписчиков (view/UI)
• Однонаправленный поток выглядит так: экшен → редьюсер → обновление стора → UI
• Так обеспечиваются предсказуемость и контроль над изменениями состояния

Подробный ответ

Основной ответ

Когда вы выполняете диспатч (dispatch) экшена в Redux, экшен передаётся в стор, где запускается процесс обновления состояния. В общем виде диспатч инициирует последовательный вызов редьюсеров: они на основе текущего состояния и полученного экшена формируют новое состояние. После этого подписчики, включая UI-компоненты, получают уведомление и при необходимости обновляют отображение.

Ключевые моменты

• Диспатч экшена выполняется вызовом метода store.dispatch(action), при этом action — plain object с обязательным полем type.
• Middleware: прежде чем попасть в редьюсеры, экшен может пройти через цепочку middleware, например Redux Thunk или Saga. Они способны изменять экшен, записывать его в лог или выполнять асинхронную обработку.
• Редьюсеры — чистые функции, получающие прежнее состояние и экшен и возвращающие новое состояние. В Redux 4+ редьюсеры работают синхронно, а store хранит состояние immutably.
• Подписчики регистрируются в сторе через store.subscribe(). После применения нового состояния они вызываются, благодаря чему React-компоненты через, например, connect или useSelector могут обновить UI.
• Асинхронность обычно выносится в middleware, поскольку сам Redux по умолчанию выполняет операции синхронно.

Практический контекст

В React-приложении на Redux 4+ при диспатче сначала может сработать middleware, например Redux Thunk, используемый для асинхронных API-вызовов, после чего экшен поступает в редьюсеры. Когда состояние обновлено, React-дерево пересчитывается с помощью библиотеки react-redux. Для отладки в продакшене нередко подключают redux-logger, позволяющий отслеживать экшены и состояние.