Scoped Store: Когда useReducer не тянет, а Redux — слишком

В сфере искусственного интеллекта произошло заметное событие. IslamX только что Scoped Store: Когда useReducer не тянет, а Redux — слишком Средний 7 мин 3 JavaScript * ReactJS * TypeScript * Веб-разработка * Проектирование и рефакторинг * Туториал Всем привет, я Ислам, фронтенд-инженер, сегодня хочу разобрать такую интересную связку для локальных сложных контекстов состояний в React проектах, а именно связку React Context+useState+useReducer и как мы его можем заменить на связку Context+Zustand+useRef получая заметный профит по следующим показателям:- Масштабируемость- Чистота- Оптимизация- ПростотаПочти все разработчики работали со сложными локальными состояниями где глобального Redux/MobX было слишком много, а нативные решения на основе useState/useReducer+Context были слишком громоздкими и рано или поздно превращались во франкенштейна с задатками кривого Redux, отличаясь от проекта к проекту и даже от компонента к компоненту. Разберем реальный кейс из продакшнаКонтекст: Есть приложение в котором присутствует большой модуль - лента развлекательных видео (отрезки из мультфильмов, фильмов, блогов и тд) с образовательным уклоном в формате коротких видео (tiktok, reels, shorts) с интерактивными субтитрами. Под капотом этой фичи стоит ИИ-модель которая на вход принимает видео в оригинальном языке и выдает объект с субтитрами и метаданными.

Субтитры состоят из так называемых part. Part - это цельная составная единица, которая включает в себя смысловую часть текста (как минимум одно слово). Это сделано для того, чтобы не терять смысл при переводе но и не переводить весь текст целиком, позволяя юзеру изучать предложение по смысловым частям.

Технические детали

Модуль предназначен для изучения языка в духе Duolingo, но вовлечение достигается за счет коротких интерактивных видео. Проблема в том, что ИИ в некоторых случаях ошибается в таймингах, переводах и сегментации токенов в part. Чтобы исправлять такие ошибки, было принято решение сделать отдельный модуль в админке - редактор интерактивных субтитров.

Страница редактора состоит из:- Видеоплеера (vidstack)- Таймлайна с сегментами- Теги (опционально)- Глобальные действия (сохранить, удалить, добавить и тд)Редактор должен уметь всё что нужно для полноценной правки субтитров: управление плеером, визуальный таймлайн с сегментами, полный CRUD над part-ами включая разбиение, слияние и миллисекундную точность таймингов, редактирование внутреннего содержимого каждого part, управление тегами и метку текущего времени на таймлайне. Покажу кусочек интерфейса чтобы примерно представить о чем речь:Часть интерфейса редактора субтитровСуть проблемы: нам необходимо изолировать состояние в рамках страницы, но сделать так, чтобы это состояние мог получать и редактировать любой компонент из этой сложной композиции. Эволюция проблемы: от наивности к «недоредаксу»Первое что приходит в голову - использовать на топ-левеле useState/useReducer и шарить состояние и сеттер через context.

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