zustand 状态管理库

zustand 是一个非常轻量级的状态管理库，用于在 React 应用程序中创建全局状态容器。它提供了一种简单直观的方式来全局管理状态，而无需像 Redux 那样涉及许多样板代码。

zustand 通过创建一个存储（store），允许组件订阅和更新这个全局状态。

zustand/middleware 中的 devtools 和 immer 是两个中间件，提供额外的功能：

1. devtools: devtools 中间件用于集成 Redux DevTools。它允许你在 Redux DevTools 中查看和调试 zustand 存储的状态变化。这对于开发过程中追踪状态的改变和调试非常有帮助。

2. immer: immer 中间件允许你以一种更简洁和不易出错的方式修改状态。它使用了 Immer 库的能力，使得你可以通过修改 "草稿" 状态（而不是直接修改原始状态）来生成新的不可变状态。这种方法在处理复杂的状态逻辑时非常有用。

使用例子

以下是一个简单的使用 zustand，devtools 和 immer 的例子：

首先，确保安装 zustand 和 immer：

npm install zustand immer

创建一个存储:

接下来，创建一个 zustand 存储，并使用 devtools 和 immer 中间件。

import create from 'zustand';
import { devtools } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

const useStore = create(
  devtools(
    immer((set) => ({
      count: 0,
      increment: () => set((state) => void (state.count += 1)),
      decrement: () => set((state) => void (state.count -= 1))
    }))
  )
);

这里，我们创建了一个包含 count 状态和两个操作该状态的方法（increment 和 decrement）的存储。

在组件中使用存储:

然后，在你的 React 组件中使用这个存储。

import React from 'react';
import { useStore } from './store'; // 假设存储位于 store.js 文件

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}
export default Counter;

在这个组件中，我们订阅了 count 状态，并使用 increment 和 decrement 函数来更新它。

这个例子展示了如何使用 zustand 与 immer 和 devtools 中间件来创建和使用一个全局状态存储，以及如何在组件中订阅和更新这个状态。