Tutorial negeri paling mudah

Zustand ialah perpustakaan pengurusan negeri yang kecil, pantas dan berskala untuk React, yang berfungsi sebagai alternatif kepada penyelesaian yang lebih kompleks seperti Redux. Sebab utama Zustand mendapat begitu banyak daya tarikan ialah saiznya yang kecil dan sintaksnya yang ringkas berbanding dengan Redux.

Fahami Persediaan Zustand

Pertama sekali, anda perlu memasang Zustand dan TypeScript jika anda belum melakukannya.

npm install zustand
'or'
yarn add zustand

Zustand menyediakan fungsi cipta untuk menentukan kedai anda. Mari kita lihat contoh asas di mana kita menyimpan dan memanipulasi nilai kiraan.

Mari kita buat fail bernama store.ts di mana kita mempunyai cangkuk tersuai useCounterStore():

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

Dalam contoh ini:

• kira ialah sekeping negeri.

• increaseCount dan resetCount ialah tindakan yang mengubah suai keadaan.

• set ialah fungsi yang disediakan oleh Zustand untuk mengemas kini kedai.

Menggunakan Stor dalam Komponen 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 (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increase Count</button>
    </div>
  )
}

export default Counter;

Di sini, Kaunter ialah Komponen Reaksi. Seperti yang anda lihat, useCounterState() digunakan untuk mengakses kiraan dan kenaikan.

Anda boleh memusnahkan negeri dan bukannya mendapatkannya secara langsung seperti yang berikut:

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

Tetapi pendekatan ini menjadikannya kurang berprestasi. Jadi, amalan terbaik ialah mendapatkan akses terus ke negeri seperti yang ditunjukkan sebelum ini.

Tindakan Asynchronous

Membuat tindakan tak segerak atau memanggil permintaan API ke pelayan juga agak mudah dalam Zustand. Di sini, kod berikut menerangkan semuanya:

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

Bukankah ia kelihatan seperti fungsi async generik dalam JavaScript? Pertama sekali ia menjalankan kod tak segerak dan kemudian ia menetapkan keadaan dengan nilai yang diberikan.

Sekarang, mari lihat cara anda boleh menggunakannya pada komponen tindak balas:

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

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

Bagaimana untuk mengakses keadaan di luar Komponen Reaksi

Sehingga kini, anda hanya mengakses keadaan dalam komponen React. Tetapi bagaimana dengan mengakses keadaan dari luar komponen React? Ya, dengan Zustand anda boleh mengakses keadaan dari luar Komponen Reaksi.

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

Di sini, anda boleh melihat getCount() sedang mengakses ke keadaan oleh getState()

Kita boleh menetapkan kiraan juga:

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

Persis Middleware

Perisian tengah berterusan dalam Zustand digunakan untuk mengekalkan dan menghidrat semula keadaan merentas sesi penyemak imbas, biasanya menggunakan localStorage atau sessionStorage. Ciri ini membolehkan anda mengekalkan keadaan walaupun selepas muat semula halaman atau apabila pengguna menutup dan membuka semula penyemak imbas. Berikut ialah pecahan terperinci tentang cara ia berfungsi dan cara menggunakannya.

Penggunaan asas berterusan

Berikut ialah cara untuk menyediakan kedai Zustand dengan berterusan:

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

Keadaan disimpan di bawah kekunci "bear-storage" dalam localStorage. Sekarang, walaupun anda memuat semula halaman, bilangan beruang akan berterusan sepanjang muat semula.

Secara lalai, berterusan menggunakan localStorage, tetapi anda boleh menukarnya kepada sessionStorage atau mana-mana sistem storan lain. Terdapat banyak perkara untuk dibincangkan mengenai topik keadaan berterusan di Zustand. Anda akan mendapat tutorial/siaran terperinci mengenai topik ini, yang akan mengikuti siaran ini.

Kesimpulan

Kita semua tahu betapa hebatnya Redux sebagai alat pengurusan negeri. Tetapi Redux mempunyai plat dandang yang agak kompleks dan besar. Itulah sebabnya semakin ramai pembangun memilih Zustand sebagai alat pengurusan negeri mereka yang mudah dan boleh skala.

Tetapi anda masih akan melihat Redux lebih disyorkan untuk pengurusan keadaan yang sangat kompleks dan bersarang.

Atas ialah kandungan terperinci Tutorial negeri paling mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!