Что такое Redux и для чего он используется?react-31

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

Основные концепции

1. Единое хранилище

import { createStore } from 'redux';

const store = createStore(rootReducer);

Все состояние приложения хранится в одном объекте-хранилище (store).

2. Неизменяемость состояния

Состояние в Redux нельзя изменять напрямую — только через редьюсеры (reducers).

3. Три основных принципа:

  1. Единственный источник истины
    Состояние всего приложения хранится в одном дереве объектов (store).

  2. Состояние только для чтения
    Изменять состояние можно только через экшены (actions).

  3. Изменения через чистые функции
    Редьюсеры (reducers) описывают как состояние трансформируется в ответ на экшены.

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

1. Actions

Объекты, которые описывают что произошло:

const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: { text, id: Date.now() }
});

2. Reducers

Чистые функции, которые принимают предыдущее состояние и экшен, возвращают новое состояние:

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

3. Store

Создается комбинацией редьюсеров:

import { combineReducers, createStore } from 'redux';

const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

const store = createStore(rootReducer);

4. Middleware

Для side-эффектов (например, асинхронных операций):

import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

Для чего используется?

  1. Глобальное состояние приложения
    Когда разные компоненты на разных уровнях вложенности нуждаются в одних данных.

  2. Сложные state-логики
    Когда логика обновления состояния становится слишком сложной для useState/useReducer.

  3. Отслеживание изменений состояния
    Redux DevTools позволяют детально анализировать каждое изменение.

  4. Серверный рендеринг (SSR)
    Удобно передавать состояние с сервера клиенту.

Современный Redux Toolkit

Упрощенный API для работы с Redux:

import { createSlice, configureStore } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // Можно "мутировать" благодаря Immer
    }
  }
});

const store = configureStore({
  reducer: {
    todos: todosSlice.reducer
  }
});

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

  • Маленькие приложения
  • Простые формы/состояния
  • Когда Context API достаточно
  • Если данные только локальные для компонента

Альтернативы

  • Context API + useReducer
  • MobX
  • Apollo Client (для GraphQL)
  • Zustand/Jotai (более легкие решения)

Резюмируем

  1. Redux — это библиотека для централизованного управления состоянием
  2. Основные элементы: store, actions, reducers
  3. Главные преимущества:
    • Предсказуемость изменений
    • Централизованное состояние
    • Инструменты разработчика
  4. Для новых проектов лучше использовать Redux Toolkit
  5. Используйте только когда действительно нужно — не для каждого состояния

Пример подключения к React:

import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Вопросы

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