Перейти к основному контенту
Tech Path Finder
КурсыИнтервьюКод-ревьюБлог
Tech Path Finder

Персонализированный путеводитель в IT. Квизы, мок-интервью, код ревью и аналитика прогресса.

@potapov_me

Платформа

  • Курсы
  • Прогресс
  • Мок-интервью
  • Код ревью
  • Тренажёр переговоров
  • Закладки

Контент

  • Блог
  • Главная
  • Обратная связь

Компания

  • О проекте
  • Тарифы
  • Условия использования
  • Конфиденциальность
  • Согласие на обработку данных
  • Cookie
  • Реквизиты

Аккаунт

  • Войти
  • Зарегистрироваться
  • Профиль

© 2026 Tech Path Finder. Все права защищены.

·ИП Потапов К.С.·Политика конфиденциальности·
Сделано с ❤️ в России
  1. Архитектура состояния и данных
state_data_architecture

Архитектура состояния и данных

Server state и client state, cache ownership, optimistic concurrency, URL state, нормализация и выбор хранилища.

Открыть лабораториюv0.1.0Запускается локально из публичного репозитория

Архитектура состояния и данных

Большинство проблем «управления состоянием» начинаются с того, что данные разных владельцев и lifetime складывают в одно хранилище.

#Результат урока

Вы классифицируете данные, выберете authoritative source, cache/invalidation policy и согласование параллельных mutations.

До начала достаточно reducers, routing, Actions, async UI и внешние stores. В конце должен появиться не конспект, а карта ownership и работающий cache adapter для списка с optimistic update и conflict recovery.

#1. Классификация по владельцу и lifetime

Различайте local UI, form draft, URL, server state/cache, session и external realtime state. Для каждого запишите authoritative source, scope, persistence, update source и consistency. Один «global state» скрывает эти различия и создаёт неверные reset/invalidation правила.

Рабочая проверка. Заполните таблицу данных продукта до выбора библиотеки.

Типичная поломка. Положить hover, access token и server list в один persisted store.

#2. Server state не равен client state

Server data имеет удалённого владельца, stale/fetch/error semantics и может меняться без клиента. Cache хранит snapshot с key, freshness и invalidation. Копирование query result в client store создаёт второй источник и ручную синхронизацию, если нет независимого draft/workflow.

Рабочая проверка. Удалите Effect, копирующий query data в Redux/local state.

Типичная поломка. После каждого fetch dispatch полного списка в ещё один store.

#3. Детерминированные cache keys

Key включает все входы, влияющие на результат: resource, id, filters, tenant/user boundary. Один и тот же logical request получает один key; разные auth scopes не делят приватные данные. Объекты параметров canonicalize или формируют структурно по правилам библиотеки.

Рабочая проверка. Создайте key factory и tests для filters/tenant.

Типичная поломка. Key products для всех tenants и фильтров.

#4. Freshness и invalidation

Stale time — продуктовая политика допустимой давности, не магическое ускорение. Invalidation помечает связанные entries устаревшими или обновляет cache из mutation response. Broad invalidation проста, но дорога; точечная требует знать зависимости. GC/cache time регулирует память, а не свежесть.

Рабочая проверка. Определите freshness для справочника и остатков склада отдельно.

Типичная поломка. Ставить infinite stale time динамичным данным без push/invalidation.

#5. Optimistic update как транзакция

Перед mutation снимите затрагиваемый cache, примените optimistic patch, на failure rollback/refetch, на success согласуйте server response. Параллельные mutations требуют correlation/version. Blind rollback старого snapshot может стереть более новое успешное изменение.

Рабочая проверка. Завершите две quantity mutations в обратном порядке.

Типичная поломка. Один global previousState для всех параллельных mutations.

#6. Конфликты версий и сохранение намерения

При edit conflict сервер возвращает version/ETag mismatch. UI не должен молча перезаписать чужое изменение или потерять draft. Покажите fresh server value, локальный draft и варианты merge/retry. Last-write-wins допустим только как осознанная доменная policy.

Рабочая проверка. Смоделируйте 409 и экран сравнения.

Типичная поломка. Автоматически повторить PUT без version после 409.

#7. Persistence и schema migration

Persisted client state становится долговременным форматом. Храните минимум, добавляйте version и migration/clear policy, не сохраняйте secrets и server cache без необходимости. localStorage синхронен, доступен script и может содержать повреждённую строку — чтение начинается с unknown/try-catch.

Рабочая проверка. Мигрируйте preferences v1→v2 и обработайте invalid JSON.

Типичная поломка. Persist всего global store, включая access token и transient errors.

#8. Выбор библиотеки через требования

Сравнивайте решение по selectors, devtools, async/cache policy, SSR, bundle, ecosystem и team skill. Redux Toolkit подходит сложным client transitions/event trace; TanStack Query — server cache; Context — доставка стабильной зависимости; route loaders — navigation data. Комбинация нормальна при чётких границах.

Рабочая проверка. Напишите ADR для state stack, включая отказ от ненужных слоёв.

Типичная поломка. Выбрать один store для всего только ради единого DevTools.

#Лаборатория

Спроектируйте inventory UI: filters в URL, draft в form state, session в provider, products в server cache. Добавьте stale time, key factory, optimistic quantity update, version conflict 409 и rollback/refetch policy.

Критерий завершения: нет копий server entities в global client store без причины, cache keys детерминированы, конфликт не теряет ввод пользователя. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.

#Источники для сверки

  • React: Managing State
  • TanStack Query overview
  • Redux style guide

Устранение неисправностей

Проверьте свои знания

Вопросы ещё не добавлены

Вопросы для этой подтемы ещё не добавлены.

Далее: Тестирование React-приложений