0Pricing
React Academy · Урок

Создание первого хранилища Zustand

Определите хранилище с помощью create(), добавьте части состояния и действия, а затем используйте его через useStore.

«Создание первого хранилища Zustand» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы создадите своё первое хранилище Zustand с помощью create(), определите срезы состояния и действия, а затем будете использовать хранилище в компонентах React.

Что такое Zustand?

Zustand — это минималистичная библиотека управления состоянием, не навязывающая определённый подход. store — это обычный объект JavaScript с состоянием и функциями. Компоненты подписываются на него через хук. Провайдеры, редьюсеры и шаблонный код не нужны.

Установка

Установите Zustand. Ему не нужны зависимости peer.
npm install zustand

Создание store

Вызовите create() с функцией, которая возвращает начальное состояние и действия. Функция получает вспомогательную `set` для обновления состояния.
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Использование store в компоненте

Вызовите хук store в любом компоненте, чтобы получить доступ к состоянию и действиям. Оборачивать компонент в Provider не требуется.
function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Синтаксис селектора

Передайте функцию-селектор в хук store, чтобы подписаться только на нужный Вам срез. Компонент будет повторно отображаться только при изменении выбранного значения.
const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Обновление состояния с помощью set

Функция `set` поверхностно объединяет новые значения с store. Вы можете передать объект или функцию, которая получает текущее состояние и возвращает частичные обновления.
set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Асинхронные действия

Действия могут быть асинхронными. Вызовите set после ожидания данных. Промежуточное ПО не требуется — просто напишите обычные асинхронные функции.
const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Обновление вложенного состояния

Для вложенных объектов вручную разверните внешний уровень или используйте промежуточное ПО immer для глубоких изменений. По умолчанию set объединяет только ключи верхнего уровня.
set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Чтение store вне React

Получите состояние store вне компонента с помощью getState(), а на изменения подпишитесь с помощью subscribe(). Это полезно для тестирования и кода, не связанного с React.
const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Быстрая проверка

Что делает функция set в store Zustand?

Итоги

Создайте store Zustand с помощью create((set) => ({ state, actions })). В компонентах используйте синтаксис селекторов, чтобы подписываться на срезы. Действия вызывают set() для обновления состояния. Это работает асинхронно и вне React с помощью getState().

Далее

Следующий урок: **Селекторы и предотвращение лишних повторных отображений** — Вы выделите определённые срезы состояния, чтобы компоненты повторно отображались только при необходимости.

Часто задаваемые вопросы

Урок «Создание первого хранилища Zustand» бесплатный?

Да — полный текст урока «Создание первого хранилища Zustand» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание первого хранилища Zustand»?

Определите хранилище с помощью create(), добавьте части состояния и действия, а затем используйте его через useStore. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Создание первого хранилища Zustand»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание первого хранилища Zustand
  2. Селекторы и предотвращение лишних повторных рендерингов
  3. Сохранение состояния с промежуточным ПО persist
  4. DevTools Zustand и тестирование хранилищ
← Назад к React Academy