介紹

狀態(tài)管理對(duì)於任何 React 應(yīng)用程式都至關(guān)重要，但像 Redux 這樣的傳統(tǒng)函式庫(kù)有時(shí)會(huì)讓人覺(jué)得大材小用。輸入 Zustand，這是一個(gè)最小且強(qiáng)大的 React 狀態(tài)管理解決方案。在這篇文章中，我們將深入探討為什麼 Zustand 成為開(kāi)發(fā)人員的最愛(ài)，以及如何在 React 專案中開(kāi)始使用它。

祖斯坦是什麼？

Zustand 是 React 的狀態(tài)管理函式庫(kù)，設(shè)計(jì)簡(jiǎn)單直覺(jué)。它是輕量級(jí)的，不需要大量樣板，這使得它比 Redux 甚至 React Context API 更容易使用。讓我們看看如何在 React 應(yīng)用程式中使用 Zustand。

在 React 中設(shè)定 Zustand

• 安裝 Zustand
  

  npm install zustand
  

• 建立商店
  以下是如何在 Zustand 中建立商店的簡(jiǎn)單範(fàn)例：
  

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

• 在組件中使用 Store
  現(xiàn)在，讓我們?cè)?React 元件中使用 store：
  

  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;
  

進(jìn)階 Zustand 功能：get、getState

• Zustand 也提供了另外兩個(gè)有用的函數(shù)：get 和 getState。這些用於檢索狀態(tài)並獲取任意時(shí)間點(diǎn)的狀態(tài)

getState(): 此函數(shù)為您提供商店的當(dāng)前狀態(tài)，而無(wú)需觸發(fā)重新渲染。

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(): 此函數(shù)可讓您直接從儲(chǔ)存本身存取狀態(tài)。如果您需要在設(shè)定之前或之後檢查或修改狀態(tài)，它非常有用。

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

Zustand 中的切片

• 隨著應(yīng)用程式的成長(zhǎng)，最好將您的狀態(tài)組織成更小、更易於管理的部分。這就是切片發(fā)揮作用的地方。切片是一個(gè)模組化的狀態(tài)區(qū)塊，有自己的一組操作。每個(gè)切片都可以在自己的文件中定義，使您的程式碼更乾淨(jìng)且更易於維護(hù)。

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

如何使用內(nèi)部組件

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

Zustand 持續(xù)狀態(tài)

• Zustand 的持久中間件會(huì)在狀態(tài)發(fā)生變更時(shí)自動(dòng)將其儲(chǔ)存到 localStorage，並在頁(yè)面重新載入時(shí)將其載入回來(lái)，確保狀態(tài)保持不變，而無(wú)需額外的工作。

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

從 Zustand 中的 API 取得數(shù)據(jù)

• 要從 Zustand 中的 API 取得數(shù)據(jù)，請(qǐng)?jiān)谏痰曛薪⒉僮鱽?lái)處理 API 呼叫並使用取得的資料、載入和錯(cuò)誤狀態(tài)更新?tīng)顟B(tài)。

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;

以上是React 和 Zustand 狀態(tài)管理初學(xué)者指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！