Zustand 的中间件有哪些，如何使用它们？

Zustand 常用中间件：

1. persist 中间件

   • 功能：将状态持久化到 localStorage、sessionStorage 或自定义存储
   • 使用场景：需要保持用户登录状态、用户偏好设置等
   • 示例：

     javascript
     import { create } from 'zustand';
     import { persist } from 'zustand/middleware';
     
     const useStore = create(
       persist(
         (set) => ({
           user: null,
           setUser: (user) => set({ user }),
         }),
         {
           name: 'user-storage', // 存储名称
         }
       )
     );

2. devtools 中间件

   • 功能：集成 Redux DevTools，方便调试状态变化
   • 使用场景：开发环境中调试状态管理
   • 示例：

     javascript
     import { create } from 'zustand';
     import { devtools } from 'zustand/middleware';
     
     const useStore = create(
       devtools(
         (set) => ({
           count: 0,
           increment: () => set((state) => ({ count: state.count + 1 })),
         })
       )
     );

3. immer 中间件

   • 功能：使用 Immer 库简化不可变状态更新
   • 使用场景：处理复杂的嵌套状态更新
   • 示例：

     javascript
     import { create } from 'zustand';
     import { immer } from 'zustand/middleware/immer';
     
     const useStore = create(
       immer((set) => ({
         user: { name: 'John', age: 30 },
         updateName: (name) =>
           set((state) => {
             state.user.name = name;
           }),
       }))
     );

4. combine 中间件

   • 功能：组合多个状态切片
   • 使用场景：模块化管理复杂状态

中间件组合使用：

javascript
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist(
      (set) => ({
        // 状态和操作
      }),
      { name: 'app-storage' }
    )
  )
);

自定义中间件：

可以根据需要创建自定义中间件，例如日志记录、性能监控等。