Как работает Redux?react-36

Redux — это предсказуемый контейнер состояния (state container) для JavaScript-приложений, чаще всего используемый с React. Он помогает централизованно управлять состоянием приложения, делая его поведение предсказуемым и удобным для отладки.

Основные принципы Redux

  1. Single Source of Truth (Единственный источник истины)
    Состояние всего приложения хранится в одном объекте — store (хранилище). Это упрощает отладку и сериализацию состояния.

  2. State is Read-Only (Состояние только для чтения)
    Изменять состояние можно только через отправку actions (действий) — простых объектов, описывающих, что произошло.

  3. Changes are Made with Pure Reducers (Изменения через чистые редюсеры)
    Функции-редюсеры (reducers) принимают предыдущее состояние и action, возвращают новое состояние. Они должны быть "чистыми" (без side effects).

Основные компоненты Redux

1. Store

const store = createStore(rootReducer);

Единственный объект, который:

  • Хранит состояние приложения
  • Позволяет получить состояние через getState()
  • Позволяет обновить состояние через dispatch(action)
  • Регистрирует слушателей через subscribe(listener)

2. Actions

{
  type: 'ADD_TODO',
  payload: 'Learn Redux'
}

Простые объекты, которые описывают, что произошло. Должны иметь поле type и могут содержать дополнительные данные (обычно в payload).

3. Reducers

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

Чистые функции, которые:

  • Принимают предыдущее состояние и action
  • Возвращают новое состояние
  • Не должны мутировать исходное состояние
  • Не должны иметь side effects (побочных эффектов)

4. Dispatch

store.dispatch({ type: 'INCREMENT' });

Метод store для отправки actions. Это единственный способ изменить состояние.

Рабочий процесс

  1. Пользователь взаимодействует с интерфейсом (например, нажимает кнопку)
  2. Приложение dispatch'ит action
  3. Redux передает action всем редюсерам
  4. Соответствующий редюсер обновляет часть состояния
  5. Store уведомляет подписчиков об изменении состояния
  6. React компоненты перерисовываются с новым состоянием

Middleware

const logger = store => next => action => {
  console.log('dispatching', action);
  return next(action);
};

Позволяют расширить функциональность Redux. Популярные middleware:

  • redux-thunk для асинхронных действий
  • redux-saga для сложных side effects
  • redux-logger для логирования

Подключение к React

<Provider store={store}>
  <App />
</Provider>

Используется react-redux для связки:

  • Provider делает store доступным для всех компонентов
  • useSelector для чтения состояния
  • useDispatch для отправки actions

Преимущества Redux

  • Централизованное управление состоянием
  • Предсказуемость изменений
  • Удобство отладки (Redux DevTools)
  • Легкость тестирования
  • Большое сообщество и экосистема

Когда использовать Redux?

  • Сложное состояние, доступное во многих местах
  • Часто меняющееся состояние
  • Необходимость "путешествия во времени" (time travel debugging)
  • Большая кодовая база с множеством разработчиков

Резюмируем

Redux — это мощный инструмент для управления состоянием, основанный на строгих принципах однонаправленного потока данных. Он особенно полезен в больших приложениях, где важно поддерживать предсказуемость и согласованность состояния.

Вопросы

Собеседования