PassFront
  1. PassFront
  2. База знаний
  3. Контекст и State managers

Чем Zustand отличается от Redux и когда его выбирать?

Контекст и State managers

Zustand — небольшая библиотека состояния для React на хуках, без провайдера и шаблонного кода.

Как выглядит

import { create } from 'zustand';

const useCart = create((set) => ({
  items: [],
  add: (item) => set((s) => ({ items: [...s.items, item] })),
  clear: () => set({ items: [] }),
}));

function CartCount() {
  const count = useCart((s) => s.items.length); // подписка только на нужный кусок
  return <span>{count}</span>;
}

Сравнение с Redux

  • Нет Provider, редьюсеров и действий: стор — это хук.
  • Компонент подписывается через селектор и перерисовывается, только когда выбранный кусок изменился.
  • Меньше церемоний, но и меньше правил: каждая команда сама решает структуру.
  • У Redux богаче экосистема и инструменты отладки, он удобнее для больших команд с единым стилем.

Выбор

Небольшое и среднее приложение, локальный глобальный стейт, быстрые прототипы: Zustand. Большое приложение со сложной логикой и требованием к предсказуемости: Redux Toolkit.

Коротко для собеседования

Zustand проще и легче, Redux Toolkit строже и мощнее по инструментам. Оба позволяют подписываться на часть состояния.

Другие вопросы раздела