[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', // 持久化存储的键名 } ) ) ) ```