Что такое Redux и как в нем работают диспетчеры и экшены?

Redux — это библиотека для управления состоянием в JavaScript-приложениях, чаще всего в связке с React. Суть в том, что всё состояние приложения хранится в одном объекте — store. Меняется оно только через отправку action с помощью метода dispatch, а обработкой каждого action занимается reducer. Это даёт предсказуемый поток данных и упрощает отладку.

Разберём подробнее.

• Store — центральный объект. Его создают через createStore или, в современном Redux Toolkit, через configureStore.
• Action — это простой объект с полем type (строка, которая уникально идентифицирует действие) и опциональным payload (данные, которые нужны для изменения состояния). Например: { type: 'ADD_TODO', payload: { text: 'Learn Redux' } }.
• Dispatch — это функция, которую даёт store. Вызывая store.dispatch(action), вы передаёте action в store, и тот прогоняет его через все reducer’ы (обычно один).
• Reducer — чистая функция: принимает текущее состояние и action, возвращает новое состояние (не мутирует старое).

// Пример reducer для списка задач
const initialState = { todos: [] };

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter((_, i) => i !== action.payload.index),
      };
    default:
      return state;
  }
}

// Создаём store
const store = Redux.createStore(todoReducer);

// Диспатчим action
store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });
console.log(store.getState()); // { todos: [{ text: 'Learn Redux' }] }

Dispatch — это единственный способ что-то поменять в store. Компонент (например, через React-Redux hook useDispatch) вызывает dispatch с action, reducer отрабатывает синхронно, store оповещает подписчиков об изменении, и UI обновляется.

Для junior достаточно понимать этот цикл: action → dispatch → reducer → новое состояние. Побочные эффекты (асинхронные запросы) обрабатываются через middleware (например, Redux Thunk), но на базовом уровне это уже выходит за рамки вопроса.