Как state попадает в Redux?

Продвинутые темы

State попадает в Redux через dispatch action: компонент отправляет action, reducer обрабатывает его и возвращает новое состояние, которое сохраняется в store.

Поток данных

dispatch(action) → reducer(state, action) → новый state → store → UI

Пошагово

1. Dispatch action

Компонент отправляет action (объект с type и данными):

dispatch({ type: 'counter/incremented', payload: 1 });
// или через action creator
dispatch(increment(1));

2. Reducer обрабатывает

Чистая функция получает текущее состояние и action, возвращает новое состояние (без мутации):

function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { ...state, count: state.count + action.payload };
    default:
      return state;
  }
}

3. Store обновляется

Store сохраняет новое состояние и уведомляет подписчиков.

4. UI обновляется

Компоненты, подписанные через useSelector, получают новое состояние и перерисовываются:

const count = useSelector((state) => state.count);

С асинхронностью

Для данных с сервера — middleware (thunk):

// createAsyncThunk загружает данные и диспатчит результат в store
dispatch(fetchUsers()); // → pending → fulfilled/rejected → state

В Redux Toolkit

createSlice генерирует reducer и actions; можно «мутировать» черновик (Immer превращает в иммутабельное обновление).

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

State попадает в Redux так: компонент делает dispatch(action) → reducer (чистая функция) обрабатывает action и возвращает новое состояние → store обновляется → подписанные через useSelector компоненты перерисовываются. Асинхронные данные — через middleware (thunk/createAsyncThunk). Поток однонаправленный: action → reducer → state → UI.