Как выглядит поток данных в приложении React с Redux?

Поток данных в React+Redux — однонаправленный цикл: компонент диспатчит действие, редьюсер вычисляет новое состояние, подписанные компоненты получают его через селекторы.

Цикл по шагам

UI (событие) → dispatch(action) → [middleware] → reducer(state, action) → новый state
     ↑                                                                        ↓
useSelector ← уведомление подписчиков ←──────────────── store обновлён ←──────┘

1. Событие в компоненте:

const dispatch = useDispatch();
<button onClick={() => dispatch(addToCart({ id, qty: 1 }))}>В корзину</button>

2. Action — простой объект { type: 'cart/addToCart', payload } — «что произошло», без логики.

3. Middleware (thunk/saga/RTK Query) перехватывает: здесь асинхронность — запросы, после которых диспатчатся success/failure-действия.

4. Reducer — чистая функция (state, action) → newState: иммутабельно вычисляет следующее состояние (в Redux Toolkit — через Immer). Никаких запросов и случайностей.

5. Store заменяет состояние новым и уведомляет подписчиков.

6. useSelector в компонентах прогоняет селекторы по новому state: чей результат изменился (===) — тот компонент ререндерится с новыми данными.

Свойства потока

• Данные всегда движутся по кругу в одну сторону — «изменить состояние напрямую» нельзя, только через action.
• Единственный источник правды — store; UI — его проекция.
• Каждое изменение именовано (type) — журнал действий в DevTools, time travel, воспроизводимость багов.

Коротко для собеседования

Однонаправленный цикл: событие → dispatch(action) → middleware (асинхронность) → чистый reducer → новый иммутабельный state → store уведомляет → useSelector отдаёт данные изменившимся компонентам. Мутировать нельзя, только actions; store — единственный источник правды, всё изменяемое — прослеживаемо в DevTools.