Simplest Zustand Tutorial

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<CounterStore>((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count + 1 })),
    resetCount: () => set({ count: 0 })
}))

In diesem Beispiel:

• Anzahl ist ein Stück Staat.

• increaseCount und resetCount sind Aktionen, die den Zustand ä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 (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increase Count</button>
    </div>
  )
}

export default Counter;

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

Sie können den Zustand zerstören, anstatt ihn direkt zu erhalten, wie es im Folgenden der Fall ist:

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 wird.

Asynchrone Aktionen

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

export const useCounterStore = create<CounterStore>((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 })
}))

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

Jetzt sehen wir uns an, wie Sie es auf einer Reaktionskomponente verwenden können:

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

  return (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
      </div>
    </div>
  )
}

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 (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  )
}

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<BearState>(
  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 ihr Statusverwaltungstool, das einfach und skalierbar ist.

Dennoch werden Sie sehen, dass Redux eher für die sehr komplexe und verschachtelte Zustandsverwaltung zu empfehlen ist.

Das obige ist der detaillierte Inhalt vonSimplest Zustand Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!