Управление состоянием в React: Глубже чем useState. Сочетание Context API и useReducer для сложных сценариев

Категория: Статьи • 1 July 2025 • 8 мин чтения
jsx
// Пример создания контекста с использованием useReducer
const UserContext = React.createContext();

function userReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, isAuth: true, user: action.payload };
    case 'LOGOUT':
      return { ...state, isAuth: false, user: null };
    case 'UPDATE_PROFILE':
      return { ...state, user: { ...state.user, ...action.payload } };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

function UserProvider({ children }) {
  const [state, dispatch] = React.useReducer(userReducer, {
    isAuth: false,
    user: null
  });
  
  const value = { state, dispatch };
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

// Компонент-потребитель
function UserProfile() {
  const { state, dispatch } = React.useContext(UserContext);
  
  const handleUpdate = () => {
    dispatch({
      type: 'UPDATE_PROFILE',
      payload: { name: 'Алексей Иванов' }
    });
  };

  return (
    <div>
      {state.isAuth ? (
        <button onClick={handleUpdate}>Обновить профиль</button>
      ) : (
        <LoginForm />
      )}
    </div>
  );
}

Лекарство от проп-дриллинга: Когда простого состояния недостаточно

Большинство React-разработчиков начинают с useState — удобного и простого примитива для управления состоянием. Но по мере роста приложения буквально все сталкиваются с одной и той же проблемой: компонентам на разных уровнях вложенности требуется доступ к одним и тем же данным, и вы начинаете протаскивать пропсы через десяток промежуточных компонентов.

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

Context API против проп-дриллинга: Механика работы

Context API решает проблему доступа к данным без явной передачи пропсов. Механизм состоит из трёх частей:

  1. Создание контекста (React.createContext()): Определяет хранилище данных
  2. Провайдер (<Context.Provider>): Обёртка, предоставляющая доступ к данным
  3. Хук контекста (useContext(Context)): Извлекает данные в компоненте-потребителе

Главная сильная сторона Context API — его интеграция с системой рендеринга React. Когда значение контекста изменяется, все компоненты, использующие useContext для этого контекста, перерисовываются. Это отличается от традиционных систем pub/sub где подписчики помечены явно.

Но есть проблема: Context API не управляет состоянием сам по себе, он лишь предоставляет механизм его передачи. Вот где на сцену выходит useReducer.

useReducer в действии: Предикативное управление изменениями

Хук useReducer предлагает предсказуемый подход к обновлению состояния по аналогии с Redux. Его сигнатура:

jsx
const [state, dispatch] = useReducer(reducer, initialState);

Чем он превосходит useState:

  • Централизует логику изменений состояния
  • Позволяет обрабатывать сложные сценарии обновлений
  • Облегчает тестирование (чистые функции-редюсеры)
  • Предоставляет стёк вызовов для отладки

Параметр reducer — чистая функция с сигнатурой (state, action) => newState. Action — простые объекты с обязательным полем type:

jsx
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      if (state.items.some(item => item.id === action.item.id)) {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.item.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          )
        };
      }
      return { ...state, items: [...state.items, action.item] };
    
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.id)
      };
      
    case 'CLEAR_CART':
      return { ...state, items: [] };
      
    default:
      return state;
  }
}

Важный нюанс: всегда возвращайте новый объект состояния вместо мутации существующего. Прямое изменение state — частая причина скрытых багов.

Комбинирование: Context + useReducer = Мощь в декларативном стиле

Когда вы объединяете эти две технологии, получаете следующие преимущества:

  • Глобально доступное состояние без сторонних библиотек
  • Чёткое разделение между логикой состояния и компонентами
  • Предсказуемое изменение состояния через экшены
  • Централизованная точка управления бизнес-логикой

Рассматривайте контекст как канал транспортировки состояния, а редюсер — как механизм управления изменениями:

jsx
const CartContext = React.createContext();

function CartProvider({ children }) {
  const [state, dispatch] = React.useReducer(cartReducer, { items: [] });
  
  const value = {
    cart: state,
    addItem: (item) => dispatch({ type: 'ADD_ITEM', item }),
    removeItem: (id) => dispatch({ type: 'REMOVE_ITEM', id }),
    clearCart: () => dispatch({ type: 'CLEAR_CART' })
  };
  
  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

// Использование в компоненте
function ProductCard({ product }) {
  const { addItem } = useContext(CartContext);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={() => addItem(product)}>Add to Cart</button>
    </div>
  );
}

Обратите внимание: вместо передачи dispatch напрямую мы предоставляем семантические методы (addItem, removeItem). Это упрощает интерфейс контекста и скрывает внутренние детали реализации.

Производительность: Неочевидные подводные камни

Подход не лишен недостатков. Основная проблема — повторные рендеры. Когда состояние контекста изменяется, все потребители контекста перерисовываются, даже если они используют лишь часть всего состояния.

Решение — сегментация контекстов. Вместо одного монолитного хранилища создайте несколько специализированных:

jsx
// Разделение на аутентификацию и UI-настройки
function AppProviders({ children }) {
  return (
    <AuthProvider>
      <UIProvider>
        {children}
      </UIProvider>
    </AuthProvider>
  );
}

Ещё одна оптимизация — мемоизация значений контекста:

jsx
function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  
  const actions = useMemo(() => ({
    addItem: (item) => dispatch({ type: 'ADD_ITEM', item }),
    removeItem: (id) => dispatch({ type: 'REMOVE_ITEM', id })
  }), []); // dispatch стабилен между рендерами

  const value = useMemo(() => ({ 
    cart: state, 
    actions 
  }), [state, actions]);

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

Структура вложенности контекстов имеет значение. Компоненты обновляются при изменениях только в ближайшем контексте вверх по дереву через useContext.

Когда стоит использовать Redux вместо Context API

Несмотря на мощь этого подхода, Context API с useReducer не заменяет Redux во всех случаях:

  • Отладка: Redux DevTools даёт богатые возможности для отслеживания экшенов и состояния
  • Middleware: Перехватчики для асинхронных операций, логгирования, обработки ошибок
  • Оптимизации: Тонкая настройка подписок через connect и memoized selectors
  • Встроенные паттерны: Redux Toolkit упрощает ситуацию с boilerplate кодом

Если ваше приложение имеет сложные асинхронные потоки данных или требует развитой инфраструктуры отладки — Redux остаётся предпочтительным выбором.

Асинхронные операции: Запросы API в контексте

Часто требуется выполнять запросы и сохранять результаты в контекст. Для этого можно расширить редюсер состоянием загрузки и ошибок:

jsx
function apiReducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true, error: null };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

function ApiProvider({ children }) {
  const [state, dispatch] = useReducer(apiReducer, {
    data: null,
    loading: false,
    error: null
  });
  
  const fetchData = async (url) => {
    dispatch({ type: 'FETCH_START' });
    try {
      const response = await fetch(url);
      const data = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', error });
    }
  };
  
  const value = { ...state, fetchData };
  
  return <ApiContext.Provider value={value}>{children}</ApiContext.Provider>;
}

Открытый вопрос: где вызывать fetchData? В useEffect компонента или в обработчике события. Избегайте вызовов API в самом провайдере при монтировании. Вместо этого вызывайте метод в компонентах когда это необходимо.

Типизация с TypeScript: Полная безопасность

Статическая типизация добавляет надёжности при работе с контекстом. Определим типы для состояния и экшенов:

tsx
type AuthState = {
  isAuth: boolean;
  user: { id: string; name: string } | null;
};

type AuthAction =
  | { type: 'LOGIN'; payload: { id: string; name: string } }
  | { type: 'LOGOUT' }
  | { type: 'UPDATE_NAME'; name: string };

const authReducer = (state: AuthState, action: AuthAction): AuthState => {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, isAuth: true, user: action.payload };
    case 'LOGOUT':
      return { ...state, isAuth: false, user: null };
    case 'UPDATE_NAME':
      if (!state.user) return state;
      return { ...state, user: { ...state.user, name: action.name } };
    default:
      return state;
  }
};

// Типизированное создание контекста
const AuthContext = React.createContext<{
  state: AuthState;
  dispatch: React.Dispatch<AuthAction>;
} | undefined>(undefined);

Если вы используете TypeScript версии 4.4 и выше, используйте useReducer с типизацией экшенов — это защищает от опечаток в типах экшенов и неполных switch-блоках.

Тестирование: Изоляция бизнес-логики

Чистые редюсеры легко тестировать без рендеринга компонентов:

javascript
test('cartReducer adds new item', () => {
  const state = { items: [] };
  const action = { type: 'ADD_ITEM', item: { id: 1, name: 'Телефон' } };
  const newState = cartReducer(state, action);
  
  expect(newState.items).toHaveLength(1);
  expect(newState.items[0].quantity).toBe(1);
});

test('cartReducer increments quantity for existing item', () => {
  const state = {
    items: [{ id: 1, name: 'Телефон', quantity: 1 }]
  };
  
  const action = { type: 'ADD_ITEM', item: { id: 1, name: 'Телефон' } };
  const newState = cartReducer(state, action);
  
  expect(newState.items[0].quantity).toBe(2);
});

Для тестирования компонентов используйте кастомные провайдеры в тестах:

jsx
test('displays cart items', () => {
  const TestProvider = ({ children }) => (
    <CartContext.Provider value={{
      cart: { items: [{ id: 1, name: 'Тестовый товар' }] },
      addItem: jest.fn(),
      removeItem: jest.fn()
    }}>
      {children}
    </CartContext.Provider>
  );
  
  render(<CartPage />, { wrapper: TestProvider });
  expect(screen.getByText('Тестовый товар')).toBeInTheDocument();
});

Где границы применения

Context API с useReducer — мощная комбинация, но имеет чёткие границы применимости:

✅ Лучше использовать для:

  • Глобальных параметров UI (тема, язык) Cardsажной игры карт
  • Данных пользовательской сессии
  • Кеширования результатов API

⛔ Избегайте для:

  • Часто изменяющихся данных с высокой сложностью (чат в реальном времени)
  • Веб-приложений с экстремальными требованиями к производительности
  • Систем с инвертированными зависимостями

Для небольших приложений useState может быть более целесообразным даже для разделяемого состояния. Избегайте чрезмерного архитектурного усложнения там, где простого подъёма состояния достаточно.

Заключение: Выбор инструмента под задачу

Context API в сочетании с useReducer предоставляет современному разработчику полноценный инструмент для управления глобальным состоянием без привязки к внешним библиотекам. Но вместо слепого следования паттернам, оценивайте:

  1. Масштаб системы (количество связанных компонентов)
  2. Характер состояния (частота изменений, сложность)
  3. Необходимость централизованной бизнес-логики
  4. Требования к отладке и логированию

Работая с React, не забывайте золотое правило: как только вы начинаете передавать пропы более чем через три уровня компонентов, подумайте о Context API. А когда имеете дело с контрактно-сложными изменениями состояния, useReducer станет вашим союзником.