Какие знаешь ключевые принципы Redux?

Принципы Redux

Redux — это предсказуемый контейнер состояния для JavaScript-приложений, основанный на трёх фундаментальных принципах, которые делают его поведение последовательным и удобным для отладки.

1. Единый источник истины (Single Source of Truth)

Состояние всего приложения хранится в виде одного дерева объектов внутри единственного store. Это упрощает отладку и мониторинг приложения, так как состояние в любой момент времени детерминировано и легко сериализуемо.

// Пример структуры состояния
const initialState = {
  user: {
    name: 'Иван',
    isAuth: true
  },
  todos: [
    { id: 1, text: 'Изучить Redux', completed: true }
  ],
  visibilityFilter: 'SHOW_ALL'
};

Преимущества этого подхода:

• Упрощённая отладка: можно легко сохранять и восстанавливать состояние (time-travel debugging).
• Гибкость: упрощает реализацию функций типа "отмена/повтор".
• Сериализация: состояние можно легко преобразовать в JSON для сохранения или гидратации.

2. Состояние доступно только для чтения (State is Read-Only)

Единственный способ изменить состояние — отправить action (действие), которое описывает, что произошло. Это защищает состояние от случайных изменений и делает все изменения централизованными и последовательными.

// Action — это простой JavaScript-объект
const addTodoAction = {
  type: 'ADD_TODO', // Обязательное поле, описывает тип действия
  payload: {
    id: 2,
    text: 'Понять принципы Redux'
  }
};

// Отправка действия через store
store.dispatch(addTodoAction);

Почему это важно:

• Нет побочных эффектов в изменении состояния: все изменения происходят синхронно и предсказуемо через редьюсеры.
• Логирование: каждое изменение становится записью в логе, что позволяет воспроизводить баги.
• Согласованность: UI не сможет напрямую изменить состояние, что предотвращает рассинхронизацию.

3. Изменения осуществляются чистыми функциями (Changes are Made with Pure Functions)

Для описания того, как дерево состояния трансформируется действием, используются редьюсеры (reducers). Это чистые функции, которые принимают предыдущее состояние и действие, и возвращают новое состояние, не изменяя исходные данные.

// Пример редьюсера (pure function)
const todosReducer = (prevState = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      // ВАЖНО: Возвращаем новый массив, а не мутируем старый!
      return [...prevState, action.payload];
    case 'TOGGLE_TODO':
      return prevState.map(todo =>
        todo.id === action.payload.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return prevState;
  }
};

Ключевые характеристики чистого редьюсера:

• Детерминированность: для одних и тех же аргументов всегда возвращает один и тот же результат.
• Без побочных эффектов: не изменяет свои входные аргументы, не выполняет API-запросы, не работает с глобальными переменными.
• Предсказуемость: легко тестировать, так как логика изолирована.

Как принципы работают вместе: однонаправленный поток данных

Эти три принципа формируют однонаправленный поток данных (unidirectional data flow), который является сердцем архитектуры Redux.

1. Dispatch: Компонент инициирует изменение, вызывая store.dispatch(action).
2. Reduction: Store вызывает переданный ему корневой редьюсер, который, комбинируя результаты других редьюсеров, вычисляет новое состояние.
3. Subscription: Store уведомляет все подписанные компоненты об изменении состояния.
4. Render: Компоненты получают новое состояние и перерисовываются.

// Упрощённая иллюстрация потока
// 1. Действие
const action = { type: 'INCREMENT' };

// 2. Редьюсер (чистая функция)
const counterReducer = (state = 0, action) => {
  if (action.type === 'INCREMENT') {
    return state + 1; // Возвращаем новое значение
  }
  return state;
};

// 3. Store (единый источник истины)
const store = Redux.createStore(counterReducer);

// 4. Подписка на изменения
store.subscribe(() => {
  console.log('Новое состояние:', store.getState());
});

// Запуск потока: Dispatch -> Reducer -> Update -> Notify
store.dispatch(action); // Лог: "Новое состояние: 1"

Эволюция принципов в современном контексте

С появлением Redux Toolkit (RTK), официального подхода к написанию Redux-логики, принципы остались незыблемыми, но их реализация стала проще:

• Единый источник истины: усиливается с помощью configureStore.
• Состояние для чтения: createAction и createSlice автоматически генерируют action creators.
• Чистые функции: createReducer и createSlice используют библиотеку Immer, позволяя писать код, который выглядит как мутирующий, но под капотом остаётся иммутабельным.

Эти принципы обеспечивают масштабируемость, предсказуемость и удобство поддержки сложных frontend-приложений, что делает Redux проверенным выбором для управления глобальным состоянием.