Zustand 状态调试以及持久话

要在 Zustand 中集成 DevTools 进行状态调试，可以使用 zustand 的 devtools 中间件。这个中间件允许Zustand 状态管理与 Redux DevTools 进行集成，从而可以更方便地调试应用状态。

以下是如何在 Zustand 中添加 DevTools 中间件的步骤：

安装依赖

确保已经安装了 Zustand 和 Zustand 的 devtools 中间件：

npm install zustand
npm install zustand/middleware

创建带 DevTools 的 Store

使用 Zustand 的 devtools 中间件来创建 store，并进行持久化：

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

interface StoreState {
  count: number;
  increase: () => void;
  decrease: () => void;
}

// 使用 `devtools` 和 `persist` 中间件来创建 store
const useStore = create<StoreState>(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increase: () => set((state) => ({ count: state.count + 1 })),
        decrease: () => set((state) => ({ count: state.count - 1 })),
      }),
      {
        name: 'my-storage', // 存储到 localStorage 中的键
        getStorage: () => localStorage, // 自定义存储介质，如果需要
      }
    ),
    { name: 'my-app-store' } // DevTools 中显示的 store 名称
  )
);

export default useStore;

使用 DevTools

1、安装 Redux DevTools 扩展：在你的浏览器中安装 Redux DevTools 扩展。

2、打开 DevTools：在浏览器中打开 DevTools，你会看到一个名为 my-app-store 的选项卡（或你在 devtools 中间件中设置的名称）。在这里，你可以查看和调试 Zustand 的状态。

注意事项

• 确保在开发环境中使用 DevTools，因为在生产环境中你通常不需要这些调试工具。
• DevTools 中会记录状态的每次变更，你可以使用这些记录来回溯和分析状态的变化。