React基礎學習-Day06

zustand基本使用方式

1.基礎使用

基本使用 zustand 的步驟包括創建狀態存儲和在組件中使用這些狀態和更新函數。以下是一個基礎的示例，演示如何使用 zustand 來管理一個簡單的計數器狀態。

安裝

首先，確保你的項目中已經安裝了 zustand：

npm install zustand

或者使用 yarn：

yarn add zustand

創建和使用狀態存儲

創建狀態存儲：

使用 create 函數來創建一個狀態存儲。在回調函數中，定義狀態對象及其更新函數。

// counterStore.jsimport create from 'zustand';const useCounterStore = create((set) => ({count: 0,increment: () => set((state) => ({ count: state.count + 1 })),decrement: () => set((state) => ({ count: state.count - 1 })),
}));export default useCounterStore;

在這個示例中：

count 是狀態的初始值，初始化為 0。
increment 和 decrement 是更新函數，分別用于增加和減少 count 的值。

在組件中使用狀態：

在需要使用狀態的 React 組件中，使用 useCounterStore Hook 來獲取狀態和更新函數。然后，可以直接在組件中使用這些函數來更新狀態。

import React from 'react';
import useCounterStore from './counterStore';const CounterComponent = () => {const { count, increment, decrement } = useCounterStore();return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);
};export default CounterComponent;

在這個組件中：

使用 useCounterStore Hook 來獲取 count 和 increment、decrement 更新函數。
每當按鈕被點擊時，對應的更新函數將被調用，從而更新 count 的值。

總結

使用 zustand 可以簡化和管理 React 應用程序中的狀態。通過 create 函數創建狀態存儲，定義狀態和更新函數。然后，在組件中使用相應的 Hook 來獲取和更新狀態，從而實現組件之間的狀態共享和管理。這種方式不僅簡潔直觀，而且基于 React Hooks，適用于函數組件中的狀態管理。

當然可以，請稍等。

以下是帶有保留專用名詞的翻譯：

2.切片模式

在 Zustand 中，切片模式是一種將主要存儲區分割為較小、更易管理的存儲單元的技術。每個存儲單元負責特定的狀態和操作，有助于保持模塊化并隨著應用程序的增長改善代碼組織。

示例切片

以下是如何使用 Zustand 創建和組合單獨切片的示例：

Fish 切片

// fishSlice.js
export const createFishSlice = (set) => ({fishes: 0,addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
});

Bear 切片

// bearSlice.js
export const createBearSlice = (set) => ({bears: 0,addBear: () => set((state) => ({ bears: state.bears + 1 })),eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
});

合并切片成為綁定存儲

// useBoundStore.js
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';export const useBoundStore = create((set) => ({...createBearSlice(set),...createFishSlice(set),
}));

在 React 組件中的使用

然后，您可以在 React 組件中使用 useBoundStore 來訪問和更新組合狀態：

import React from 'react';
import { useBoundStore } from './useBoundStore';function App() {const bears = useBoundStore((state) => state.bears);const fishes = useBoundStore((state) => state.fishes);const addBear = useBoundStore((state) => state.addBear);return (<div><h2>熊的數量：{bears}</h2><h2>魚的數量：{fishes}</h2><button onClick={() => addBear()}>添加一只熊</button></div>);
}export default App;

更新多個切片

如果需要同時更新多個切片，您可以創建一個組合操作：

// createBearFishSlice.js
export const createBearFishSlice = (set, get) => ({addBearAndFish: () => {get().addBear();get().addFish();},
});

將所有商店合并在一起與以前相同。

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
import { createBearFishSlice } from './createBearFishSlice'export const useBoundStore = create((...a) => ({...createBearSlice(...a),...createFishSlice(...a),...createBearFishSlice(...a),
}))

添加中間件

您還可以將中間件應用于組合存儲，增強其功能：

// useBoundStore.js with middleware
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';
import { persist } from 'zustand/middleware';export const useBoundStore = create(persist((set) => ({...createBearSlice(set),...createFishSlice(set),}),{ name: 'bound-store' })
);

中間件解釋：

在上下文中使用 persist 中間件時，它通常會將狀態持久化到瀏覽器的本地存儲中，例如使用 localStorage。具體來說，它將狀態數據序列化為字符串并存儲在瀏覽器提供的持久化存儲中，以確保即使在頁面刷新或關閉后，數據仍然可以被讀取和恢復。

主要點概述：

localStorage:
- localStorage 是瀏覽器提供的一個持久化存儲機制，允許網頁存儲鍵值對數據。
- 使用 persist 中間件時，它默認會將狀態數據序列化為 JSON 字符串，并存儲在 localStorage 中。
數據位置:
- 持久化的數據存儲在瀏覽器的 localStorage 中，與當前網站域名相關聯。
- 數據以鍵值對的形式存儲，鍵是配置中指定的名稱（例如 { name: 'bound-store' } 中的 'bound-store'）。
持久化機制:
- 當應用程序使用 set 函數來更新 Zustand 中的狀態時，persist 中間件會捕獲這些更新，并將新的狀態數據序列化后存儲到 localStorage。
- 在頁面刷新或重新加載后，可以通過讀取 localStorage 中相應的鍵來恢復存儲的狀態數據，從而實現數據的持久化和恢復功能。
配置選項:
- persist 中間件的配置選項允許您指定存儲的名稱、存儲路徑或其他相關設置，以便更精細地控制數據的存儲和管理。

通過使用 persist 中間件，您可以輕松地在 Zustand 狀態管理中實現數據的持久化，這對于需要在用戶會話之間保持狀態或保存用戶偏好設置的應用程序特別有用。

總結

Zustand 中的切片模式使您能夠在 React 應用程序中保持可擴展和組織良好的狀態管理方法。通過將主存儲分解為更小、專注的切片，您可以提高模塊化程度、簡化測試并增強代碼庫的可維護性。這是管理復雜應用程序狀態的強大模式。

3.create函數

在 Zustand 中，create 函數用于創建狀態存儲。create 函數的第一個參數是一個狀態創建器（state creator）函數。這個狀態創建器函數接收一組參數，這些參數用于管理和修改狀態。通常，這些參數包括 set、get 和其他可能的工具函數。

狀態創建器函數的參數列表

set:
- 用于更新狀態的函數。
- 典型的用法是 set((state) => ({ ...state, someProperty: newValue }))，它接收一個函數，這個函數的參數是當前的狀態，返回值是新的狀態部分對象。
get:
- 用于獲取當前狀態的函數。
- 可以通過 get() 來訪問當前的狀態值，常用于讀取狀態的當前值以便在更新時參考。
api:
- 代表整個 Zustand 存儲 API 的對象。
- 包含其他有用的方法和工具，可以用于更高級的狀態管理需求。

參數列表示例

假設我們有一個簡單的狀態存儲，用于管理一個計數器和一個名稱屬性，狀態創建器函數的參數列表如下：

import create from 'zustand';const useStore = create((set, get, api) => ({count: 0,name: 'Zustand',increment: () => set((state) => ({ count: state.count + 1 })),reset: () => {const currentName = get().name;set({ count: 0, name: 'Zustand' });console.log('Reset done for', currentName);},apiFunction: () => {console.log('Store API:', api);}
}));export default useStore;

參數詳細說明

set:
- 類型：(partial: Partial<State> | ((state: State) => Partial<State>)) => void
- 用途：更新狀態。
- 示例：set((state) => ({ count: state.count + 1 }))
get:
- 類型：() => State
- 用途：獲取當前狀態。
- 示例：const currentCount = get().count
api:
- 類型：StoreApi<State>
- 用途：訪問存儲 API。
- 示例：api.getState()

示例解釋

count 和 name 是狀態屬性。
increment 是一個方法，使用 set 函數更新 count。
reset 方法使用 get 函數讀取當前的 name，然后重置 count 和 name。
apiFunction 方法展示了如何使用 api 對象。

總結

Zustand 的 create 函數接受一個狀態創建器函數，該函數可以接收三個參數：set、get 和 api。這些參數提供了更新和獲取狀態的功能，以及對 Zustand 存儲 API 的訪問。通過這些工具，您可以靈活地管理狀態并實現復雜的狀態邏輯。

5.create中的參數API

在 Zustand 中，api 對象是整個存儲 API，它提供了對狀態存儲的全面控制。這個 api 對象可以通過狀態創建器函數的第三個參數訪問。api 對象包括以下常見方法和屬性：

setState(partialState, replace?):
- 更新狀態。
- partialState 是一個部分狀態對象或函數，它接收當前狀態并返回部分狀態對象。
- replace 是一個可選的布爾值，指示是否替換整個狀態。
getState():
- 獲取當前狀態。
- 返回當前狀態對象。
subscribe(listener):
- 訂閱狀態變化。
- listener 是一個函數，每當狀態改變時都會被調用。
- 返回一個取消訂閱的函數。
destroy():
- 銷毀存儲，清理所有訂閱。

示例代碼

import create from 'zustand';const useStore = create((set, get, api) => ({count: 0,increment: () => set((state) => ({ count: state.count + 1 })),reset: () => {const currentState = get();set({ count: 0 });console.log('State has been reset:', currentState);},printApi: () => {console.log('Store API:', api);}
}));export default useStore;

使用說明

setState(partialState, replace?):

用于更新狀態。

示例：

api.setState({ count: 10 });
api.setState((state) => ({ count: state.count + 1 }));
api.setState({ count: 0 }, true);  // 完全替換狀態

getState():

用于獲取當前狀態。

示例：

const state = api.getState();
console.log('Current state:', state);

subscribe(listener):

用于訂閱狀態變化。

示例：

const unsubscribe = api.subscribe((newState) => {console.log('State changed:', newState);
});// 取消訂閱
unsubscribe();

destroy():
- 用于銷毀存儲，清理所有訂閱。
- 示例：
```
api.destroy();
```

總結

api 對象提供了對 Zustand 存儲的全面控制，通過它可以更新狀態、獲取當前狀態、訂閱狀態變化以及銷毀存儲。了解這些方法有助于更靈活和高效地管理 Zustand 狀態。