Эволюция интеграции Redux и React: от замыканий к хуку useSyncExternalStore

Эволюция интеграции Redux и React: от замыканий к хуку useSyncExternalStore

В мире фронтенд-разработки на JavaScript существует популярное мнение о том, что библиотека управления состоянием Redux изначально создавалась как абсолютно независимый от фреймворков инструмент (framework-agnostic). Технически это действительно так: ядро Redux представляет собой крошечный файл объемом около сотни строк кода на чистом JS, реализующий классический паттерн публикации-подписки. Однако на практике Redux почти никогда не используется сам по себе. Его популярность неразрывно связана с библиотекой React, а история развития их интеграции отражает эволюцию архитектуры самого React — от простых подписок на базе жизненных циклов компонентов до сложных оптимизаций в режиме конкурентного рендеринга (Concurrent Mode) в React 18.

Устройство Redux под капотом: магия замыканий

Вся "магия" хранения данных в Redux строится на простейшей концепции функционального программирования — замыкании. Центральное хранилище (Store) удерживает текущее состояние внутри функции, закрытой от прямого изменения извне.

Рассмотрим минимальную, полностью рабочую реализацию функции создания хранилища createStore на чистом JavaScript, чтобы понять принципы работы библиотеки изнутри:

function createStore(reducer, preloadedState) {
  let currentState = preloadedState;
  const listeners = new Set();

  function getState() {
    return currentState;
  }

  function subscribe(listener) {
    listeners.add(listener);
    return function unsubscribe() {
      listeners.delete(listener);
    };
  }

  function dispatch(action) {
    currentState = reducer(currentState, action);
    listeners.forEach(listener => listener());
    return action;
  }

  return { getState, subscribe, dispatch };
}

Как видно из кода, в ядре Redux нет абсолютно ничего реактивного или специфичного для веб-интерфейсов. Это просто объект с методами получения состояния (getState), подписки на изменения (subscribe) и отправки событий (dispatch).

Проблема реактивности: почему React не видит изменения Redux

React устроен так, что он обновляет интерфейс (запускает процесс рендеринга) только при изменении локального состояния компонента (useState / useReducer) или его пропсов. Если мы просто импортируем объект Redux Store в компонент и обновим данные через dispatch, React об этом ничего не узнает, и интерфейс останется прежним, хотя переменная currentState внутри замыкания изменила свое значение.

Для решения этой проблемы необходима связующая прослойка — библиотека react-redux. Ее задача — слушать изменения в Redux Store и принудительно заставлять React-компоненты перерисовываться.

Наивная попытка написать такую подписку внутри React-компонента часто приводит к критическим багам. Рассмотрим пример некорректной реализации:

// НАИВНАЯ И ОШИБОЧНАЯ РЕАЛИЗАЦИЯ
function Counter() {
  const [, forceUpdate] = useState(0);
  
  // ОШИБКА: подписка создается при каждом рендере, вызывая утечку памяти!
  store.subscribe(() => {
    forceUpdate(x => x + 1);
  });

  return <h1>{store.getState().count}</h1>;
}

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

Исторический экскурс: как зарождался React Redux

Летом 2015 года Дэн Абрамов работал над созданием концепции горячей перезагрузки кода (Hot Reloading) и прототипировал то, что вскоре станет Redux. Первоначально весь код интеграции с React находился в основном репозитории проекта. Однако по мере роста экосистемы стало очевидно, что смешивание логики чистого стейт-менеджера и специфичного для React кода усложняет поддержку.

В июле 2015 года код интеграции был полностью выделен в отдельный пакет react-redux. Первые версии библиотеки использовали классические методы жизненного цикла классовых компонентов (componentDidMount и componentWillUnmount) в сочетании с store.subscribe. С появлением функциональных компонентов и хуков в React 16.8 интеграция переехала на хук useEffect, который позволял безопасно подписываться на хранилище при монтировании компонента и возвращать функцию отписки:

// Исправленная подписка на базе хуков
function SafeCounter() {
  const [, forceUpdate] = useState(0);

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      forceUpdate(x => x + 1);
    });
    return unsubscribe;
  }, []);

  return <h1>{store.getState().count}</h1>;
}

Этот подход долгое время оставался индустриальным стандартом, обеспечивая стабильную работу тысяч приложений.

Проблема Tearing в React 18 и Concurrent Mode

Кардинальные изменения произошли с выходом React 18, в котором появился режим параллельного рендеринга (Concurrent Rendering). В этом режиме React получил возможность приостанавливать процесс отрисовки компонентов, если пользователь начинает взаимодействовать со страницей, или разделять работу на низкоприоритетные и высокоприоритетные задачи.

Параллельный рендеринг привел к возникновению проблемы Tearing (разрыв визуального состояния). Поскольку процесс рендеринга теперь может прерываться во времени, внешнее хранилище данных (Redux) может обновиться прямо посередине рендера дерева компонентов. В результате часть компонентов на экране отобразят старые данные, а часть — новые. Для пользователя это выглядит как мигающий, рассинхронизированный интерфейс.

Поскольку Redux хранит данные вне React-окружения (в глобальном JS-замыкании), стандартные механизмы планирования задач React не могут контролировать этот процесс.

Современное решение: хук useSyncExternalStore

Для решения проблемы Tearing команда React внедрила в ядро фреймворка новый специализированный хук — useSyncExternalStore. Он разработан специально для библиотек управления состоянием, которые используют внешние источники данных.

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

Пример интеграции внешнего хранилища с React с использованием современного хука:

import { useSyncExternalStore } from 'react';

function Counter() {
  // Хук автоматически подписывается, отписывается и следит за синхронностью
  const state = useSyncExternalStore(
    store.subscribe,
    () => store.getState().count
  );

  return <h1>{state}</h1>;
}

Хук useSyncExternalStore стал официальным стандартом для связи любого внешнего состояния с React 18+. Современные версии react-redux (начиная с версии 8) полностью переписаны под использование этого хука под капотом.

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