[TOC] ## 概述 特點 * **無需 reducer 和 actions**：不像 Redux 那樣需要創建 reducer 和 action，這使得狀態管理變得非常直接和清晰。 * **訂閱狀態變化**：Zustand 使用了訂閱模型（類似于發布/訂閱模式），允許組件僅在需要時重新渲染。 * **與 React 完美兼容**：Zustand 直接與 React 的`useState`和`useEffect`等 Hooks API 集成，因此更符合現代 React 開發模式。 ## 安裝 ``` pnpm install zustand ``` ## 示例 ### 兩種調用 初始化一個 ```js import { create } from 'zustand' export const useCount = create((set: any) => ({ count: 0, setValue: (value: number) => set({ count: value }), })) ``` 方式一:性能差,會監聽所有的變化 ```js const {count, setValue} = useCount() ``` 方式二:推薦 ```js const count = useCount((state) => state.count ) const setValue = useCount((state) => state.setValue) ``` ### get() 訪問和修改多個狀態 ```js const useStore = create((set, get) => ({ bearCount: 0, increaseBearCount: () => set((state) => ({ bearCount: state.bearCount + 1 })), resetCount: () => set({ bearCount: 0 }), logBearCount: () => { console.log(get().bearCount); // 訪問當前狀態 }, })); ``` ### 異步操作 ```js const useStore = create((set) => ({ data: [], fetchData: async () => { const response = await fetch('https://api.example.com/data'); const dataJson = await response.json(); set({ data:dataJson }); }, })); ``` ### persist 保存到瀏覽器緩存 persist 默認保存在 localStorage ```js import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' const useFishStore = create( persist( (set, get) => ({ fishes: 0, addAFish: () => set({ fishes: get().fishes + 1 }), }), { name: 'food-storage', // name of the item in the storage (must be unique) storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used }, ), ) ``` ### 在非 React 種使用 調用函數 ```js const setValue = useCount.getState().setValue ``` 定于變化 ```js // 訂閱變化 const unsubscribe = useCount.subscribe( (state) => state.count, (newCount) => { count = newCount // 這里可以處理 count 變化后的邏輯 } ) // 記得在適當的時候取消訂閱 // unsubscribe() ``` ### 使用 Immer ``` interface Person { name: string, age: number } export const useStore = create((set) => ({ person: <Person>{}, setName: (name: string) => set( produce((state: { person: Person }) => { state.person.name = name state.person.age = 18 })), })) ``` ### TypeScript 方式一: ```js interface BearState { bears: number increase: (by: number) => void } export const useBearStore = create<BearState>((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })), })) ``` 方式二: 使用 combine,推薦 ```js export const useBearStore = create( combine({ bears: 0 }, (set) => ({ increase: (by: number) => set((state) => ({ bears: state.bears + by })), }) ) ) ``` > 無需使用 接口類型,直接通過 combine 就可以進行推導 ### devtools **devtools** devtools 是 Zustand 提供的一個中間件，主要有以下幾個作用： 1. 調試功能集成： - 讓你的 Zustand store 可以與 Redux DevTools 瀏覽器擴展連接 - 可以在瀏覽器開發工具中實時查看狀態變化 - 支持時間旅行調試（time-travel debugging） 2. 狀態追蹤： - 記錄所有的狀態變更歷史 - 可以查看每次 action 執行前后的狀態差異 需要 Redux DevTools 瀏覽器擴展 ``` export const useStore = create( devtools( persist( combine( { count: 0 }, (set) => ({ increase: () => set((state) => ({ count: state.count + 1 })) }) ), { name: 'count-storage', // 持久化存儲的鍵名 } ) ) ) ```