Что хранить в Store Redux?

📦 Что хранить в Store Redux: Стратегия управления состоянием

В Redux-хранилище следует хранить глобальное состояние приложения — данные, которые используются в нескольких компонентах и должны быть синхронизированы между ними. Основной принцип — единственный источник истины (Single Source of Truth), который делает состояние предсказуемым и упрощает отладку.

---

🌍 Типы данных для хранения в Store

1. Состояние приложения (App State)

• Текущий авторизованный пользователь (user)
• Настройки UI (тема, язык, региональные настройки)
• Флаги загрузки (isLoading)
• Сообщения об ошибках (errorMessage)
• Модальные окна и их состояние

2. Доменные данные (Domain Data)

• Данные, полученные с сервера:

  // Пример структуры
  {
    posts: { byId: {}, allIds: [] },
    comments: { byId: {}, allIds: [] },
    users: { byId: {}, allIds: [] }
  }
  

• Кэшированные данные API-запросов
• Фильтры, сортировки и параметры пагинации

3. Состояние UI (UI State)

• Текущий выбранный элемент (например, активный пост)
• Состояние форм, которые используются в нескольких местах
• Параметры текущей страницы/вкладки

---

🚫 Чего НЕ стоит хранить в Store

1. Локальное состояние компонента

// ❌ НЕ хранить в Redux
const [localInput, setLocalInput] = useState('')

// ✅ Это состояние должно оставаться в компоненте
// если оно не нужно другим частям приложения

2. Производные данные (Derived Data)

• Рассчитанные значения, которые можно получить из существующего состояния
• Для этого используйте селекторы (selectors) с библиотекой reselect:

  import { createSelector } from 'reselect'
  
  const getCompletedTodos = createSelector(
    state => state.todos,
    todos => todos.filter(todo => todo.completed)
  )
  

3. Кэш браузера и несериализуемые данные

• Экземпляры классов
• DOM-элементы
• Функции
• Promises

---

🏗️ Практические примеры

Пример правильной структуры состояния:

{
  // Аутентификация
  auth: {
    user: { id: 1, name: 'John', token: '...' },
    isAuthenticated: true,
    loading: false
  },
  
  // Данные
  entities: {
    products: {
      byId: {
        'p1': { id: 'p1', name: 'Product 1', price: 100 },
        'p2': { id: 'p2', name: 'Product 2', price: 200 }
      },
      allIds: ['p1', 'p2']
    }
  },
  
  // UI состояние
  ui: {
    theme: 'dark',
    language: 'ru',
    notifications: {
      isOpen: false,
      items: []
    }
  },
  
  // Состояние для конкретных фич
  cart: {
    items: ['p1'],
    total: 100
  }
}

---

🔧 Критерии принятия решения

Используйте Redux для хранения состояния, если:

1. Несколько компонентов используют одни данные — избегаем пропс-дриллинга
2. Состояние должно сохраняться при навигации — между страницами
3. Необходима возможность "отмены/повтора" действий — Redux DevTools
4. Сложная бизнес-логика — middleware и редьюсеры
5. Серверный рендеринг (SSR) — единое состояние для клиента и сервера

---

📊 Современные альтернативы и подходы

Context API + useReducer

Для небольших приложений или изолированных частей состояния:

// Для локального контекста, не глобального состояния
const UserContext = React.createContext()

RTK Query (Redux Toolkit Query)

Для управления серверным состоянием:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({ query: () => 'posts' }),
  }),
})

Комбинированный подход

• Redux: глобальное состояние, бизнес-логика
• React State: локальное состояние компонента
• URL/Query params: состояние фильтрации
• LocalStorage: пользовательские настройки

---

🎯 Золотые правила Redux-хранилища

1. Нормализуйте данные — избегайте дублирования, используйте структуру byId/allIds
2. Держите состояние плоским — минимизируйте вложенность
3. Всегда сериализуемое состояние — для работы DevTools и SSR
4. Используйте Redux Toolkit — стандартный способ написания Redux-логики
5. Разделяйте состояние по доменам — модульная структура
6. Не злоупотребляйте — не все должно быть в Redux!

Помните: простота важнее полноты. Начинайте с минимального глобального состояния и добавляйте данные в хранилище только тогда, когда это действительно необходимо. Современные подходы с React Query/SWR могут взять на себя управление серверным состоянием, оставив Redux для действительно глобальных клиентских данных.