Управление состоянием — важнейший аспект любого приложения React. Хотя встроенный в React Context API является популярным выбором для управления состоянием, у него есть свои ограничения. Zustand — это минималистичная библиотека управления состоянием, которая предлагает более простой и эффективный способ управления состоянием в приложениях React.

Прежде чем мы перейдем к тому, как мы используем Zustand (по какой-то причине я продолжаю читать его как ZuckLand), давайте сначала перейдем к сути: зачем использовать этого нового парня в квартале?

Простота

Zustand предоставляет простой API, который упрощает настройку и использование. Вам не нужно заключать свои компоненты в поставщики или использовать компоненты более высокого порядка.

Производительность

Zustand перерисовывает только те компоненты, на которые действительно влияет изменение состояния, в отличие от Context API, который может привести к ненужным повторным рендерингам.

Гибкость

Zustand позволяет создавать несколько магазинов и использовать их по модульному принципу. Это упрощает управление сложной логикой состояний.

Поверьте мне? Нет? Все эти статьи для того, чтобы завоевать доверие, а вы до сих пор этого не сделали, ладно, давайте реализуем и посмотрим сами.

Шаг 1. Создайте новое приложение React.

Создайте приложение реагирования, используя всемирно известный create-react-app

npx create-react-app

Шаг 2. Установите пакет

Сначала вам нужно установить Zustand. Откройте терминал и запустите

npm install zustand

Шаг 3: Создайте магазин

Создайте новый файл с именем useStore.js и настройте свой магазин Zustand.

import create from "zustand";

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

export default useStore;

Шаг 4. Используйте Магазин в компонентах

Теперь вы можете использовать это хранилище в своих компонентах React.

import React from "react";
import useStore from "./useStore";

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

Шаг 5. Используйте несколько магазинов

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

// useUserStore.js
import create from "zustand";

const useUserStore = create((set) => ({
  username: "",
  setUsername: (name) => set({ username: name }),
}));

export default useUserStore;

Теперь вы можете использовать несколько хранилищ в одном компоненте.

import React from "react";
import useStore from "./useStore";
import useUserStore from "./useUserStore";

const App = () => {
  const { count, increment } = useStore();
  const { username, setUsername } = useUserStore();

  return (
    <div>
      <h1>Hello, {username}</h1>
      <button onClick={() => setUsername("John")}>Set Username</button>
      <div>
        <span>{count}</span>
        <button onClick={increment}>Increment</button>
      </div>
    </div>
  );
};

Как я уже говорил вам, неверующим, Zustand предлагает более простой, более эффективный и гибкий способ управления состоянием в приложениях React. Его минималистичный API, оптимизация производительности и модульный подход делают его привлекательной альтернативой Context API React. Попробуйте Zustand в своем следующем проекте React и почувствуйте разницу.

Если вам нравятся мои работы, нажмите на 👏, подпишитесь на меня, чтобы увидеть больше контента, и купите мне кофе, если вы чувствуете себя очень щедрым.

На простом английском языке

Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти: