Zustand — это небольшая, быстрая и масштабируемая библиотека управления состоянием для React, которая служит альтернативой более сложным решениям, таким как Redux. Основная причина, по которой Zustand приобрел такую ​​популярность, — это его небольшой размер и простой синтаксис по сравнению с Redux.

Понимание настройки Zustand

Во-первых, вам необходимо установить Zustand и TypeScript, если вы еще этого не сделали.

npm install zustand
'or'
yarn add zustand

Zustand предоставляет функцию создания для определения вашего магазина. Давайте рассмотрим базовый пример, в котором мы храним и манипулируем значением счетчика.

Давайте создадим файл с именем store.ts, в котором у нас есть собственный хук useCounterStore():

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

В этом примере:

• count — это часть штата.

• increaseCount и resetCount — это действия, которые изменяют состояние.

• set — это функция, предоставляемая Zustand для обновления магазина.

Использование хранилища в компоненте React

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

Здесь Counter — это компонент React. Как видите, useCounterState() используется для доступа к счетчику и приращению.

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

const {count, increment} = useCounterStore((state) => state)

Но такой подход снижает производительность. Итак, лучшая практика — получить доступ к состоянию напрямую, как это было показано ранее.

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

Выполнить асинхронное действие или вызвать запрос API на сервер в Zustand также довольно просто. Здесь следующий код объясняет все это:

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

Разве это не похоже на обычную асинхронную функцию в JavaScript? Прежде всего он запускает асинхронный код, а затем устанавливает состояние с заданным значением.

Теперь давайте посмотрим, как его можно использовать в компоненте реагирования:

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

Как получить доступ к состоянию вне компонента React

До сих пор вы имели доступ к состоянию только внутри компонентов React. Но как насчет доступа к состоянию из-за пределов компонентов React? Да, с помощью Zustand вы можете получить доступ к состоянию извне React Components.

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

Здесь вы можете видеть, что getCount() обращается к состоянию с помощью getState()

Мы также можем установить количество:

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

Сохранение промежуточного программного обеспечения

Промежуточное программное обеспечение persist в Zustand используется для сохранения и восстановления состояния между сеансами браузера, обычно с использованием localStorage или sessionStorage. Эта функция позволяет сохранять состояние даже после перезагрузки страницы или когда пользователь закрывает и снова открывает браузер. Вот подробное описание того, как это работает и как его использовать.

Базовое использование persist

Вот как настроить магазин Zustand с помощью persist:

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

Состояние сохраняется под ключом «bear-storage» в localStorage. Теперь, даже если вы обновите страницу, количество медведей сохранится после перезагрузки.

По умолчанию persist использует localStorage, но вы можете изменить его на sessionStorage или любую другую систему хранения. Есть много вещей, которые стоит обсудить на тему сохранения состояния в Зустанде. Вы получите подробное руководство/пост по этой теме, который последует за этим постом.

Заключение

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

Но, тем не менее, вы увидите, что Redux больше рекомендуется для серьезно сложного и вложенного управления состоянием.