Panduan Pemula untuk Pengurusan Negeri dalam Bertindak balas dengan Zustand

pengenalan

Pengurusan negeri adalah penting untuk mana-mana aplikasi React, tetapi perpustakaan tradisional seperti Redux kadangkala boleh berasa seperti berlebihan. Masukkan Zustand, penyelesaian pengurusan keadaan yang minimum dan berkuasa untuk React. Dalam siaran ini, kami akan menyelami sebab Zustand menjadi kegemaran pembangun dan cara untuk memulakannya dalam projek React anda.

Apa itu Zustand?

Zustand ialah perpustakaan pengurusan negeri untuk React yang direka bentuk untuk ringkas dan intuitif. Ia ringan dan tidak memerlukan banyak boilerplate, yang menjadikannya lebih mudah untuk digunakan daripada Redux atau bahkan React Context API. Mari lihat cara kami boleh menggunakan Zustand dalam aplikasi React kami.

Menyediakan Zustand dalam React

• Pasang Zustand
  

  npm install zustand
  

• Buat Kedai
  Berikut ialah contoh mudah cara membuat kedai di Zustand:
  

  import {create} from 'zustand';
  
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }));
  

• Menggunakan Kedai dalam Komponen
  Sekarang, mari kita gunakan kedai dalam komponen React:
  

  import React from 'react';
  import { useStore } from './store';
  
  const Counter = () => {
    const { count, increase, decrease } = useStore();
  
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
      </div>
    );
  };
  
  export default Counter;
  

Ciri Zustand Lanjutan: dapatkan, getState

• Zustand juga menyediakan dua fungsi berguna lain: get dan getState. Ini digunakan untuk mendapatkan semula keadaan dan mendapatkan keadaan pada bila-bila masa

getState(): Fungsi ini memberikan anda keadaan semasa kedai tanpa mencetuskan pemaparan semula.

import {create} from 'zustand';

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

// Accessing the current state using getState()
const count= useStore.getState().count;

// Reading the current state value
console.log(count); // This will log the current count

// Modifying the state using the actions
store.increase(); // This will increase the count
console.log(store.count); // This will log the updated count

get(): Fungsi ini membolehkan anda mengakses keadaan terus dari dalam kedai itu sendiri. Ia berguna jika anda perlu menyemak atau mengubah suai keadaan sebelum atau selepas menetapkannya.

import {create} from 'zustand';

const useStore = create((set, get) => ({
  count: 0,
  increase: (amount) => {
    const currentState = get(); // Access the current state using getState()
    console.log("Current count:", currentState.count); // Log the current count
    set((state) => ({ count: state.count + amount })); // Modify the state
  },
})); 

Hirisan dalam Zustand

• Apabila aplikasi anda berkembang, adalah idea yang baik untuk menyusun keadaan anda menjadi bahagian yang lebih kecil dan lebih mudah diurus. Di sinilah hirisan dimainkan. Potongan ialah sekeping keadaan modular dengan set tindakannya sendiri. Setiap kepingan boleh ditakrifkan dalam failnya sendiri, menjadikan kod anda lebih bersih dan lebih boleh diselenggara.

// counterStore.js
export const createCounterSlice = (set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
});

// userStore.js
export const createUserSlice = (set) => ({
  user: { name: 'John Doe' },
  setName: (name) => set({ user: { name } }),
});

// useBoundStore.js
import {create} from 'zustand';
import { createCounterSlice } from './counterStore';
import { createUserSlice } from './userStore';

export const useBoundStore = create((...a) => ({
  ...createCounterSlice(...a),
  ...createUserSlice(...a),
}));

Cara menggunakan komponen dalam

import { useBoundStore } from './useBoundStore'
const App = () => {
  const { count, increase, decrease, user, setName } = useBoundStore();
}

Keadaan Bertahan dalam Zustand

• Perisian tengah Zustand yang berterusan menyimpan keadaan secara automatik ke localStorage apabila ia berubah dan memuatkannya semula apabila halaman dimuat semula, memastikan keadaan kekal sama tanpa memerlukan kerja tambahan.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'counter-storage', // The name of the key in localStorage
    }
  )
);

Mengambil Data daripada API dalam Zustand

• Untuk mengambil data daripada API dalam Zustand, buat tindakan dalam kedai anda untuk mengendalikan panggilan API dan kemas kini keadaan dengan keadaan data, pemuatan dan ralat yang diambil.

import {create} from 'zustand';

const useStore = create((set) => ({
  users: [], // Array to store fetched users
  loading: false, // State to track loading status
  error: null, // State to track any errors during API call

  // Action to fetch users from the API
  fetchUsers: async () => {
    set({ loading: true, error: null }); // Set loading state to true and reset error
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      set({ users: data, loading: false }); // Set users data and loading to false
    } catch (error) {
      set({ error: 'Failed to fetch users', loading: false }); // Set error if fetch fails
    }
  },
}));

export default useStore;

Atas ialah kandungan terperinci Panduan Pemula untuk Pengurusan Negeri dalam Bertindak balas dengan Zustand. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!