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

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

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

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

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

• Единственный источник правды (single source of truth): всё состояние приложения хранится в одном объекте - store.
• Состояние только для чтения (state is read-only): изменить состояние можно только через dispatch action - простого объекта с полем type.
• Изменения производятся чистыми функциями (changes are made with pure functions): редюсеры принимают предыдущее состояние и action, и возвращают новое состояние без побочных эффектов.

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

• Store: объект, который хранит состояние и предоставляет методы getState(), dispatch(action), subscribe(listener).
• Action: объект с обязательным полем type (строка) и опциональными данными (payload).
• Reducer: чистая функция вида (state, action) => newState.
• Dispatch: функция, которая отправляет action в store.
• Middleware: прослойка между dispatch и reducer, позволяющая выполнять асинхронные операции (например, redux-thunk, redux-saga).

Redux не привязан к React, но в React-приложениях используется связка react-redux с хуками useSelector (чтение состояния) и useDispatch (отправка action).

На практике

На собеседовании junior-уровня важно показать понимание потока данных в Redux: пользовательский интерфейс вызывает dispatch(action), action попадает в reducer, reducer возвращает новое состояние, store уведомляет подписчиков (компоненты), и UI перерисовывается.

Типичный сценарий: кнопка "Добавить задачу" - компонент диспатчит { type: 'ADD_TODO', payload: { text: 'Купить молоко' } }, reducer добавляет элемент в массив todos, компонент списка задач через useSelector получает обновлённый массив и рендерит его.

Для асинхронных операций (например, запрос к API) используют middleware. Самый простой - redux-thunk, который позволяет диспатчить функции вместо объектов.

Пример кода

JAVASCRIPT
// action types
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// action creators
const addTodo = (text) => ({ type: ADD_TODO, payload: { text } });
const toggleTodo = (id) => ({ type: TOGGLE_TODO, payload: { id } });

// reducer
const initialState = { todos: [] };
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.payload.text, completed: false }]
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
        )
      };
    default:
      return state;
  }
}

// store
import { createStore } from 'redux';
const store = createStore(todoReducer);

// использование в React-компоненте
import { useSelector, useDispatch } from 'react-redux';

function TodoApp() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAdd = () => dispatch(addTodo('Новая задача'));
  const handleToggle = (id) => dispatch(toggleTodo(id));

  return (
    <div>
      <button onClick={handleAdd}>Добавить</button>
      {todos.map(todo => (
        <div key={todo.id} onClick={() => handleToggle(todo.id)}>
          {todo.completed ? '✓' : '○'} {todo.text}
        </div>
      ))}
    </div>
  );
}

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

Начни с краткого определения Redux и его основной цели - управление состоянием в больших приложениях. Затем объясни три принципа и поток данных: action → reducer → store → UI. Упомяни, что Redux делает состояние предсказуемым и упрощает отладку (можно использовать Redux DevTools для путешествия во времени). Если спросят про альтернативы, скажи, что для простых приложений достаточно useState/useContext, а Redux оправдан при сложной логике и множестве компонентов, которым нужно общее состояние.

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

• Понимание концепции единого источника правды и неизменяемости состояния.
• Умение объяснить поток данных и роль каждого компонента (store, action, reducer, dispatch).
• Знание, как Redux интегрируется с React (useSelector, useDispatch).
• Понимание, зачем нужны middleware (асинхронность, логирование).
• Умение написать простой reducer и action creator.

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

• Путать Redux с React (это отдельные библиотеки).
• Мутировать состояние в reducer (например, state.todos.push(...) вместо создания нового массива).
• Думать, что Redux нужен всегда - для маленьких проектов это overengineering.
• Не знать разницу между action и action creator.
• Забывать про middleware при асинхронных запросах (пытаться диспатчить промис напрямую).