Как устроена реактивность в Redux?

Как устроена реактивность в Redux?

Redux, вопреки распространённому заблуждению, не является реактивной библиотекой в классическом понимании, как, например, Vue или MobX. Его подход к управлению состоянием и реагированию на изменения основан на принципах централизованного состояния (store), чистых функций (reducers) и явной подписки (subscription), что больше соответствует архитектурному паттерну Flux, а не реактивной парадигме с автоматическим отслеживанием зависимостей. "Реактивность" в контексте Redux означает, что компоненты приложения могут реагировать на изменения в глобальном состоянии, но этот механизм реализован явно и централизовано.

Ключевые принципы "реактивности" в Redux

Реактивность в Redux обеспечивается следующим механизмом:

1. Централизованное состояние (Store)

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

import { createStore } from 'redux';

const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

2. Действия (Actions) и редюсеры (Reducers)

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

// Action
const incrementAction = { type: 'INCREMENT' };

// Reducer обрабатывает action
// Новое состояние вычисляется и возвращается явно

3. Механизм подписки (Subscription)

Это основной механизм, позволяющий компонентам "реагировать" на изменения. Store предоставляет метод subscribe(listener), который позволяет регистрировать функции-слушатели. Каждый раз, когда состояние обновляется (после вызова редюсера), store вызывает всех зарегистрированных слушателей.

const listener = () => {
  const currentState = store.getState();
  console.log('State updated:', currentState);
};

store.subscribe(listener);
store.dispatch(incrementAction); // listener будет вызван автоматически

Как это работает в связке с React (React-Redux)

В чистом Redux компоненты должны сами подписываться на store и обновлять свое состояние вручную. Библиотека React-Redux абстрагирует этот процесс, предоставляя удобные инструменты для интеграции.

4. Контекст и подписка на высоком уровне

React-Redux создаёт контекст React (Provider), который передаёт store всем компонентам приложения. Затем он предоставляет функцию connect или хуки (useSelector, useDispatch), которые:

• Внутри себя используют store.subscribe(): Компонент, использующий connect или useSelector, неявно подписывается на изменения в store.
• Сравняют выбранные данные: При каждом обновлении store, React-Redux сравнивает предыдущие и новые данные, полученные из состояния через селекторы (selectors).
• Вызывают перерендер только при реальных изменениях: Если данные, необходимые компоненту, изменились, React-Redux вызывает перерендер компонента.

// Пример с хуком useSelector
import { useSelector } from 'react-redux';

const CounterComponent = () => {
  // useSelector внутренне подписывается на store
  const count = useSelector(state => state.count);
  // Компонент перерендерится только когда `state.count` изменится
  return <div>{count}</div>;
};

Отличия от классической реактивности

• Явность против автоматизма: В классической реактивности (Vue, MobX) система автоматически отслеживает зависимости между данными и вычислениями. В Redux связь между изменением состояния и обновлением UI явно определяется через подписку и селекторы.
• Императивные обновления: Обновление состояния в Redux всегда происходит через явный вызов dispatch(action). Нет концепции "реактивных данных", которые автоматически обновляют связанные значения.
• Отсутствие отслеживания зависимостей: Redux не отслеживает, какие части состояния используются компонентом. Он просто вызывает всех подписчиков при любом изменении, а затем селекторы определяют, нужно ли обновлять конкретный компонент.
• Единый поток обновлений: Все изменения проходят через центральный редюсер, что обеспечивает строгий контроль и логирование (например, с помощью middleware).

Заключение

Таким образом, "реактивность" в Redux — это механизм явной подписки (subscription) на централизованное хранилище состояния, который в сочетании с React-Redux оптимизируется через селекторы для предотвращения ненужных перерендеров. Это мощная, предсказуемая и отлаживаемемая модель, которая, однако, требует больше ручной работы (написание действий, редюсеров, селекторов) по сравнению с системами, основанными на автоматическом отслеживании зависимостей. Она обеспечивает однонаправленный поток данных (action -> reducer -> store -> subscriber) и является фундаментом для управления сложным состоянием в больших приложениях.