Zustand ist eine kleine, schnelle und skalierbare State-Management-Bibliothek für React, die als Alternative zu komplexeren Lösungen wie Redux dient. Der Hauptgrund dafür, dass Zustand so viel Anklang gefunden hat, ist seine geringe Größe und einfache Syntax im Vergleich zu Redux.

Zustandseinrichtung verstehen

Zuerst müssen Sie Zustand und TypeScript installieren, falls Sie dies noch nicht getan haben.

npm install zustand
'or'
yarn add zustand

Zustand bietet eine Erstellungsfunktion zum Definieren Ihres Shops. Lassen Sie uns ein einfaches Beispiel durchgehen, in dem wir einen Zählwert speichern und bearbeiten.

Lassen Sie uns eine Datei namens store.ts erstellen, in der wir einen benutzerdefinierten Hook useCounterStore() haben:

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 })
}))

In diesem Beispiel:

• count ist ein Stück Zustand.

• increaseCount und resetCount sind Aktionen, die den Status ändern.

• set ist eine von Zustand bereitgestellte Funktion zum Aktualisieren des Stores.

Verwenden des Stores in einer React-Komponente

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;

Hier ist Counter eine Reaktionskomponente. Wie Sie sehen können, wird useCounterState() verwendet, um auf count und inkrementieren zuzugreifen.

Sie können den Status zerstören, anstatt ihn direkt abzurufen, wie im Folgenden:

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

Aber dieser Ansatz macht es weniger leistungsfähig. Die beste Vorgehensweise besteht also darin, direkt auf den Status zuzugreifen, wie er zuvor angezeigt wurde.

Asynchrone Aktionen

Das Ausführen einer asynchronen Aktion oder das Aufrufen einer API-Anfrage an den Server ist in Zustand ebenfalls ziemlich einfach. Hier erklärt der folgende Code alles:

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 })
}))

Scheint es nicht eine generische asynchrone Funktion in JavaScript zu sein? Zuerst wird der asynchrone Code ausgeführt und dann wird der Status mit dem angegebenen Wert festgelegt.

Sehen wir uns nun an, wie Sie es auf einer Reaktionskomponente verwenden können:

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

  return (
    

      {count}
      

        Increment
      
    
  )
}

So greifen Sie auf den Status außerhalb von React Component zu

Bisher haben Sie nur auf den Status innerhalb von React-Komponenten zugegriffen. Aber wie sieht es mit dem Zugriff auf den Status von außerhalb der React-Komponenten aus? Ja, mit Zustand können Sie von außerhalb von React Components auf den Status zugreifen.

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
      
    
  )
}

Hier können Sie sehen, dass getCount() über getState() auf den Status zugreift

Wir können auch die Anzahl festlegen:

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

Persistente Middleware

Die Persistenz-Middleware in Zustand wird verwendet, um den Status über Browsersitzungen hinweg beizubehalten und zu rehydrieren, typischerweise unter Verwendung von localStorage oder sessionStorage. Mit dieser Funktion können Sie den Status auch nach einem Neuladen der Seite oder wenn der Benutzer den Browser schließt und erneut öffnet, beibehalten. Hier finden Sie eine detaillierte Aufschlüsselung der Funktionsweise und Verwendung.

Grundlegende Verwendung von persist

So richten Sie einen Zustandsspeicher mit Persistenz ein:

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
    }
  )
);

Der Zustand wird unter dem Schlüssel „bear-storage“ in localStorage gespeichert. Selbst wenn Sie die Seite aktualisieren, bleibt die Anzahl der Bären beim erneuten Laden erhalten.

Persist verwendet standardmäßig localStorage, Sie können es jedoch in sessionStorage oder ein anderes Speichersystem ändern. Zum Thema „Persistent State in Zustand“ gibt es viele Dinge zu besprechen. Sie erhalten ein ausführliches Tutorial/einen Beitrag zu diesem Thema, der diesem Beitrag folgt.

Abschluss

Wir alle wissen, wie großartig Redux als Zustandsverwaltungstool ist. Aber Redux verfügt über eine ziemlich komplexe und umfangreiche Struktur. Aus diesem Grund entscheiden sich immer mehr Entwickler für Zustand als einfaches und skalierbares Zustandsverwaltungstool.

Aber Sie werden sehen, dass Redux eher für sehr komplexe und verschachtelte Zustandsverwaltung empfohlen wird.