> Что такое Redux, зачем он нужен и как устроен (React)

Короткий ответ

Redux - это библиотека для управления состоянием JavaScript-приложений, чаще всего используемая с React. Она решает проблему передачи данных между компонентами через единое глобальное хранилище (store) с предсказуемым потоком данных. Состояние изменяется только через dispatch экшенов (actions), которые обрабатываются чистыми функциями - редьюсерами (reducers). Это делает логику приложения прозрачной, упрощает отладку и тестирование.

Подробное объяснение

Redux основан на трёх ключевых принципах:

1. Единственный источник правды (single source of truth) - всё состояние приложения хранится в одном объекте (store). Это упрощает отслеживание изменений и синхронизацию данных между компонентами.

2. Состояние только для чтения (state is read-only) - изменить состояние можно только через dispatch экшена - простого объекта с полем type и опциональными данными. Это гарантирует, что никакой компонент не изменит состояние напрямую.

3. Чистые функции для изменений (changes are made with pure functions) - редьюсеры принимают текущее состояние и экшен, возвращают новое состояние без мутаций. Это делает логику предсказуемой и легко тестируемой.

Архитектура Redux включает:

• Store - объект, который хранит состояние и предоставляет методы getState(), dispatch(action), subscribe(listener).
• Actions - объекты с полем type (строка-идентификатор) и опциональным payload.
• Reducers - чистые функции, которые определяют, как состояние меняется в ответ на экшен.
• Middleware - прослойка между dispatch и reducer, позволяющая обрабатывать асинхронные операции (например, redux-thunk, redux-saga).

Для React используется react-redux с хуками useSelector (чтение состояния) и useDispatch (отправка экшенов), что избавляет от необходимости вручную подписываться на store.

На практике

В типичном React-приложении Redux применяется, когда:

• Множество компонентов используют одни и те же данные (например, корзина в интернет-магазине).
• Данные передаются через несколько уровней вложенности (prop drilling становится проблемой).
• Нужно централизованно управлять состоянием форм, кэшем API или пользовательской сессией.
• Требуется логирование и time-travel debugging (Redux DevTools).

На практике часто используют Redux Toolkit - официальный инструментарий, который упрощает настройку store, создание редьюсеров (через createSlice) и работу с асинхронными запросами (через createAsyncThunk).

Пример кода

JAVASCRIPT
// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    incrementByAmount: (state, action) => { state.value += action.payload; }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

// CounterComponent.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

Как отвечать на собеседовании

Начни с краткого определения Redux как инструмента управления состоянием. Затем объясни проблему, которую он решает (prop drilling, непредсказуемые изменения состояния). Перечисли три принципа и базовые элементы (store, action, reducer). Упомяни, что в современных проектах чаще используют Redux Toolkit. Если спросят про альтернативы, назови Context API, Zustand, MobX - и кратко объясни, когда Redux предпочтительнее (сложная логика, много асинхронных операций, нужны DevTools). Не углубляйся в детали middleware, если не спрашивают специально.

Что проверяет интервьюер

• Понимание проблемы, которую решает Redux (управление глобальным состоянием, предсказуемость).
• Знание базовых концепций: store, action, reducer, dispatch.
• Умение объяснить однонаправленный поток данных (unidirectional data flow).
• Понимание, зачем нужны чистые функции в редьюсерах.
• Осведомлённость о современных подходах (Redux Toolkit, createSlice).

Типичные ошибки

• Путать Redux с React (Redux - независимая библиотека).
• Говорить, что Redux хранит состояние компонентов (он хранит только глобальное состояние).
• Утверждать, что редьюсер может мутировать state (должен возвращать новый объект).
• Думать, что Redux обязателен для любого React-приложения (для простых проектов достаточно Context API).
• Не знать разницы между action creator и action (action creator - функция, возвращающая action).