Что такое action, reducer и store?

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

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

Action

Action — это простой JavaScript-объект, который описывает намерение изменить состояние. У каждого action должен быть тип (type), а также может быть дополнительная информация (payload). Action не выполняет изменения сам, он лишь сигнализирует о том, что что-то произошло в приложении (например, пользователь нажал кнопку).

// Пример action creator, который возвращает action
const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: { text, id: Date.now(), completed: false }
});
// Вызов dispatch(addTodo('Learn Redux')) отправит этот объект в store.

Reducer

Reducer — это чистая функция, которая определяет, как состояние приложения изменяется в ответ на action. Она принимает два аргумента: текущее состояние (state) и объект action, и возвращает новое состояние. Важно, чтобы reducer не мутировал исходное состояние, а возвращал новый объект. Redux может комбинировать несколько reducers для управления разными частями состояния.

// Пример reducer для списка задач
const initialState = [];
function todosReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      // Возвращаем новый массив, добавляя новую задачу
      return [...state, action.payload];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state; // Если action не распознан, состояние не меняется
  }
}

Store

Store — это объект, который объединяет всё вместе. Он хранит глобальное состояние приложения, позволяет обновлять его через метод dispatch(action), регистрирует слушателей изменений через subscribe(listener) и предоставляет доступ к состоянию через getState(). Создаётся store с помощью функции createStore(rootReducer).

import { createStore } from 'redux';
import rootReducer from './reducers';

// Создание store с корневым reducer
const store = createStore(rootReducer);

// Диспатч action для изменения состояния
store.dispatch(addTodo('Understand the store'));

// Подписка на изменения состояния (например, для обновления UI)
const unsubscribe = store.subscribe(() => {
  console.log('State updated:', store.getState());
});

// Позже можно отписаться
// unsubscribe();

Вместе action, reducer и store образуют однонаправленный поток данных: UI диспатчит action, store передаёт action в reducer, reducer вычисляет новое состояние, store обновляет себя и уведомляет подписчиков, UI перерисовывается на основе нового состояния. Это делает отладку и тестирование предсказуемыми.

Вывод: Redux с его action, reducer и store особенно полезен в средних и крупных приложениях, где необходимо централизованно управлять сложным состоянием, которое должно быть предсказуемым и легко отлаживаемым. Его стоит применять, когда проп drilling в React становится проблемой или когда состояние должно синхронизироваться между множеством независимых компонентов.