zustand

zustand是一个小巧、快速、可扩展的状态管理解决方案。它提供了基于hooks的API。

德语中“ZUSTAND”如何发音？多查几次吧，不要念错了。

1、快速上手

像react-hooks项目那样，先使用npm create vite@latest，创建react+ts的项目，然后对项目的一些文件进行处理。

1.1安装依赖

运行如下的装包命令：

xxxxxxxxxx
5
1
# NPM
2
npm install zustand
3
​
4
# Yarn
5
yarn add zustand

1.2创建store

创建store的方法是调用zustand提供的create函数。使用zustand创建出来的store是一个hook函数，因此推荐以useXxx的方式为store命名。语法格式如下：

xxxxxxxxxx
13
1
// 1.按需导入create函数
2
import { create } from "zustand"
3
​
4
// 2.调用create函数，创建名为useStore的hook
5
const useStore = create((set, get) => {
6
    // 2.1 return出去的是store中的数据或方法，是全局共享的
7
    return {
8
        bear: 0
9
    }
10
})
11
​
12
// 3.向外导出useStore的hook
13
export default useStore

在src下创建store文件夹，创建index.ts文件，然后写上面的代码。

1.3使用store

1、在组件的tsx文件中，导入store对应的hook：

xxxxxxxxxx
2
1
// 1.导入useStore这个hook
2
import useStore from "@/store"

2、在需要使用数据的组件中，调用useStore函数，通过传入的selector获取当前组件需要的数据：

xxxxxxxxxx
2
1
// 2.调用hook，通过selector获取数据
2
const bears = useStore((state) => state.bears)

3、通过selector获取到的数据，可以在组件中进行渲染使用：

xxxxxxxxxx
11
1
import { FC } from 'react'
2
import useStore from '@/store'
3
​
4
export const Father: FC = () => {
5
    // 通过selector获取数据
6
    const bears = useStore(state => state.bears)
7
    return <>
8
        <h3>Father组件</h3>
9
        <p>小熊的数量是：{bears}</p>
10
    </>
11
}

在components文件夹中创建setup.tsx文件，写入上面的代码，并将组件导入到App.tsx组件中进行展示。

1.4添加类型提示

1、在vite-env.d.ts中添加store的类型声明：

这个文件中声明的类型是全局可用的，所以如果在某个文件中使用这里面的类型，就不需要导入即可使用。

xxxxxxxxxx
5
1
/// <reference types="vite/client" />
2
​
3
type BearType = {
4
    bears:number
5
}

2、在src/store/index.ts中调用create函数时，使用类型声明：

xxxxxxxxxx
10
1
import { create } from "zustand";
2
​
3
const useStore = create<BearType>()(() => {
4
  return {
5
    bears: 0,
6
  };
7
});
8
​
9
export default useStore;
10
​

3、改造完成后，在组件中使用selector选择器获取数据时，就有了TS的类型提示信息。

注意：请注意create<T>()后面额外的()，详细原因请查看microsoft/TypeScript#10571

1.5修改bears的数量

1、在vite-env.d.ts中为BearType添加名为incrementBear的属性，它是一个函数，用来让bears的数量自增+1，示例代码如下：

xxxxxxxxxx
6
1
/// <reference types="vite/client" />
2
type BearType = {
3
  bears: number;
4
  incrementBears: () => void;
5
};
6
​

2、在src/store/index.ts中新增incrementBears函数如下：

xxxxxxxxxx
14
1
import { create } from "zustand";
2
​
3
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
4
const useStore = create<BearType>()((set) => {
5
  // 向外暴露出store的数据或方法
6
  return {
7
    bears: 0,
8
    // 让小熊数量自增+1。注意：set函数里面是一个函数，参数是state，当返回值是一个对象的时候，同名的属性会重新计算值，会以最后一个值为主，于是达到更新值的目的。注意这里的形参state，其实真实意思是prevState，是旧值，所以这种方法可以自增加1。那么set函数也可以直接放一个对象进去赋值，比如说：set({bears:9})，这样bears值就会被更新为9，不过这种方式不常用，还是用函数的方式是最好的。
9
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
10
  };
11
});
12
​
13
export default useStore;
14
​

3、在Son1组件中，调用useStore并配合selector获取到需要的函数，并绑定为按钮的点击事件处理函数：

xxxxxxxxxx
12
1
const Son1: FC = () => {
2
    // 基于selector获取到需要的函数
3
    const incrementBears = useStore(state => state.incrementBears)
4
​
5
    return (
6
        <>
7
            <h5>Son1子组件</h5>
8
            {/* 绑定为按钮的点击事件处理函数 */}
9
            <button onClick={incrementBears}>bears+1</button>
10
        </>
11
    )
12
}

1.6重置bears的数量

1、在vite-env.d.ts中为BearType添加名为resetBears的属性，它是一个函数，用来把bears的数量重置为0，示例代码如下：

xxxxxxxxxx
7
1
/// <reference types="vite/client" />
2
type BearType = {
3
  bears: number;
4
  incrementBears: () => void;
5
  resetBears: () => void;
6
};
7
​

2、在src/store/index.ts中新增reset函数如下：

xxxxxxxxxx
16
1
import { create } from "zustand";
2
​
3
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
4
const useStore = create<BearType>()((set) => {
5
  // 向外暴露出store的数据或方法
6
  return {
7
    bears: 0,
8
    // 让小熊数量自增+1
9
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
10
    // 重置bears的数量
11
    resetBears: () => set(() => ({ bears: 0 })),
12
  };
13
});
14
​
15
export default useStore;
16
​

3、在Son2组件中，调用useStore并配合selector获取到需要的函数，并进行使用：

xxxxxxxxxx
11
1
const Son2: FC = () => {
2
    // 基于selector获取到需要的函数
3
    const resetBears = useStore(state => state.resetBears)
4
    return (
5
        <>
6
            <h5>Son2子组件</h5>
7
            {/* 直接把函数绑定为按钮的点击事件处理函数 */}
8
            <button onClick={resetBears}>重置bears</button>
9
        </>
10
    )
11
}

1.7根据step使bears数量自减

1、在vite-env.d.ts中为BearType添加名为decrementBearsByStep的属性，它是一个函数，接收一个可选的step步长值，从而让bears的数量自减，示例代码如下：

xxxxxxxxxx
8
1
/// <reference types="vite/client" />
2
type BearType = {
3
  bears: number;
4
  incrementBears: () => void;
5
  resetBears: () => void;
6
  decrementBearsByStep: (step?: number) => void;
7
};
8
​

2、在src/store/index.ts中新增decrementBearsByStep函数如下：

xxxxxxxxxx
18
1
import { create } from "zustand";
2
​
3
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
4
const useStore = create<BearType>()((set) => {
5
  // 向外暴露出store的数据或方法
6
  return {
7
    bears: 0,
8
    // 让小熊数量自增+1
9
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
10
    // 重置bears的数量
11
    resetBears: () => set(() => ({ bears: 0 })),
12
    // 根据step步长值让bears数量自减
13
    decrementBearsByStep: (step = 1) => set((prevState) => ({ bears: prevState.bears - step })),
14
  };
15
});
16
​
17
export default useStore;
18
​

3、在Son3组件中，调用useStore并配合selector获取到需要的函数，并进行使用：

xxxxxxxxxx
14
1
const Son3:FC = () => { 
2
    // 基于selector获取到需要的函数
3
    const decrementBearsByStep = useStore(state => state.decrementBearsByStep)
4
​
5
    const decrement = () => {
6
        decrementBearsByStep(5)
7
    }
8
    return (
9
        <>
10
            <h5>Son5子组件</h5>
11
            <button onClick={decrement}>自减-5</button>
12
        </>
13
    )
14
 }

1.8异步修改bears的数量

1、在vite-env.d.ts中为BearType添加名为asyncIncrementBears的属性，它是一个函数，用来延迟1秒后让数值自增+1，示例代码如下：

xxxxxxxxxx
9
1
/// <reference types="vite/client" />
2
type BearType = {
3
  bears: number;
4
  incrementBears: () => void;
5
  resetBears: () => void;
6
  decrementBearsByStep: (step: number) => void;
7
  asyncIncrementBears: () => void;
8
};
9
​

2、在src/store/index.ts中新增asyncIncrementBears函数如下：

xxxxxxxxxx
24
1
import { create } from "zustand";
2
​
3
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
4
const useStore = create<BearType>()((set, get) => {
5
  // 向外暴露出store的数据或方法
6
  return {
7
    bears: 0,
8
    // 让小熊数量自增+1
9
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
10
    // 重置bears的数量
11
    resetBears: () => set(() => ({ bears: 0 })),
12
    // 根据step步长值让bears数量自减
13
    decrementBearsByStep: (step = 1) => set((prevState) => ({ bears: prevState.bears - step })),
14
    // 延迟1秒后，让bears数量+1
15
    asyncIncrementBears: () => {
16
      setTimeout(() => {
17
        // 注意这里 get() 方法的调用，它可以获取到 store 对象，并访问 store 中的数据或方法。当然也可以使用set()函数，但是不方便。
18
        get().incrementBears();
19
      }, 1000);
20
    },
21
  };
22
});
23
​
24
export default useStore;

3、在Son1组件中添加1秒后bears+1的按钮，并绑定为按钮的点击事件处理函数：

xxxxxxxxxx
14
1
const Son1: FC = () => {
2
    // 基于selector获取到需要的函数
3
    const incrementBears = useStore(state => state.incrementBears)
4
    const asyncIncrementBears = useStore(state => state.asyncIncrementBears)
5
​
6
    return (
7
        <>
8
            <h5>Son1子组件</h5>
9
            {/* 绑定为按钮的点击事件处理函数 */}
10
            <button onClick={incrementBears}>bears+1</button>
11
            <button onClick={asyncIncrementBears}>1秒后bears+1</button>
12
        </>
13
    )
14
}

1.9添加fishes相关的共享数据

1、修改vite-env.d.ts中的BearType类型，添加fishes相关的数据和方法：

xxxxxxxxxx
16
1
/// <reference types="vite/client" />
2
​
3
type BearType = {
4
  // bears相关的数据和方法
5
  bears: number;
6
  incrementBears: () => void;
7
  resetBears: () => void;
8
  decrementBearsByStep: (step?: number) => void;
9
  asyncIncrementBears: () => void;
10
​
11
  // fishes相关的数据和方法
12
  fishes: number;
13
  incrementFishes: () => void;
14
  resetFishes: () => void;
15
};
16
​

2、修改@/store/index.ts模块，添加fishes相关的数据和方法：

xxxxxxxxxx
34
1
import { create } from "zustand";
2
​
3
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
4
const useStore = create<BearType>()((set, get) => {
5
  // 向外暴露出store的数据或方法
6
  return {
7
    // bears相关的数据和方法
8
    bears: 0,
9
    // 让小熊数量自增+1
10
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
11
    // 重置bears的数量
12
    resetBears: () => set(() => ({ bears: 0 })),
13
    // 根据step步长值让bears数量自减
14
    decrementBearsByStep: (step = 1) => set((prevState) => ({ bears: prevState.bears - step })),
15
    // 延迟1秒后，让bears数量+1
16
    asyncIncrementBears: () => {
17
      setTimeout(() => {
18
        // 注意这里 get() 方法的调用，它可以获取到 store 对象，并访问 store 中的数据或方法。
19
        get().incrementBears();
20
      }, 1000);
21
    },
22
​
23
    // fishes相关的数据和方法
24
    // 小鱼干的数量
25
    fishes: 0,
26
    // 小鱼干自增+1
27
    incrementFishes: () => set((prevState) => ({ fishes: prevState.fishes + 1 })),
28
    // 重置小鱼干的数量
29
    resetFishes: () => set(() => ({ fishes: 0 })),
30
  };
31
});
32
​
33
export default useStore;
34
​

3、在@/components/目录下新建fishes.tsx模块，在模块中创建名为Fishes的组件：

xxxxxxxxxx
18
1
import { FC } from 'react'
2
import useStore from '@/store'
3
​
4
export const Fishes: FC = () => {
5
    // 基于selector获取需要的数据或方法
6
    const fishes = useStore(state => state.fishes)
7
    const incrementFishes = useStore(state => state.incrementFishes)
8
    const resetFishes = useStore(state => state.resetFishes)
9
​
10
    return (
11
        <>
12
            <h3>小鱼干的数量：{fishes}</h3>
13
            {/* 绑定点击事件处理函数 */}
14
            <button onClick={incrementFishes}>fishes+1</button>
15
            <button onClick={resetFishes}>重置小鱼干的数量</button>
16
        </>
17
    )
18
}

4、在@/App.tsx中，导入并使用Fishes组件：

xxxxxxxxxx
12
1
import { Father } from '@/components/setup'
2
import { Fishes } from '@/components/Fishes'
3
​
4
const App = () => {
5
  return (<>
6
    <Father />
7
    <hr />
8
    <Fishes />
9
  </>)
10
}
11
​
12
export default App;

1.10拆分store的两种方式

随着项目规模的扩大，存储在store中的数据会变得越来越难以维护。此时，可以考虑把单一的全局store进行拆分。在zustand中提供了两种拆分store的方式：

1、Multi-Store：把不同的数据和方法，拆分为多个彼此独立的store

2、Single-Store：把不同的数据和方法，拆分为多个slice切片，最终，把多个slice合并成全局唯一的store。

注意：上面两种拆分Store的方式都可以完美运行，在您自己的项目中，可以依据个人喜好自行决定使用哪种拆分方式。

为了分别为大家演示上述的两种Store拆分方式，我们需要借助于Git对项目进行版本管理：

1、初始化Git仓库，并提交初始版本：

xxxxxxxxxx
3
1
git init
2
git add .
3
git commit -m '初始版本-未拆分Store'

2、基于master分支，分别创建两个分支，用来单独演示每种拆分方式的具体过程：

xxxxxxxxxx
5
1
# 基于此分支，演示 Multi-Store 的拆分方式
2
git checkout -b multi-store
3
​
4
# 基于此分支，演示 Single-Store 的拆分方式
5
git checkout -b single-store

3、切换到multi-store分支，先为大家演示Multi-Store的拆分过程：

xxxxxxxxxx
1
1
git checkout multi-store

上面的git操作不涉及到仓库，因为从始至终没有push操作，但是却很好的完成了分支的目的，真的是前所未有的体验。很好。

2.以Multi-Store的方式拆分Store

Multi-Store指的是：把不同的数据和方法，拆分为多个彼此独立的store。

2.1拆分Store

1、修改vite-env.d.ts文件，把BearType和FishType拆分为两个独立的类型声明：

xxxxxxxxxx
18
1
/// <reference types="vite/client" />
2
​
3
// bears相关的数据和方法
4
type BearType = {
5
  bears: number;
6
  incrementBears: () => void;
7
  resetBears: () => void;
8
  decrementBearsByStep: (step?: number) => void;
9
  asyncIncrementBears: () => void;
10
};
11
​
12
// fishes相关的数据和方法
13
type FishType = {
14
  fishes: number;
15
  incrementFishes: () => void;
16
  resetFishes: () => void;
17
};
18
​

2、在@/store目录下，新建bearStore.ts模块，用来声明bears相关的Store数据。然后把@/store/index.ts中的代码粘贴到bearStore.ts中进行修改（特别注意：要把useStore更名为useBearStore）：

xxxxxxxxxx
28
1
// @/store/bearStore.ts
2
​
3
import { create } from "zustand";
4
​
5
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
6
const useBearStore = create<BearType>()((set, get) => {
7
  // 向外暴露出store的数据或方法
8
  return {
9
    // bears相关的数据和方法
10
    bears: 0,
11
    // 让小熊数量自增+1
12
    incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
13
    // 重置bears的数量
14
    resetBears: () => set(() => ({ bears: 0 })),
15
    // 根据step步长值让bears数量自减
16
    decrementBearsByStep: (step = 1) => set((prevState) => ({ bears: prevState.bears - step })),
17
    // 延迟1秒后，让bears数量+1
18
    asyncIncrementBears: () => {
19
      setTimeout(() => {
20
        // 注意这里 get() 方法的调用，它可以获取到 store 对象，并访问 store 中的数据或方法。
21
        get().incrementBears();
22
      }, 1000);
23
    },
24
  };
25
});
26
​
27
export default useBearStore;
28
​

3、在@/store目录下，新建fishStore.ts模块，用来声明fishes相关的Store数据。然后把@/store/index.ts中的代码粘贴到fishStore.ts中进行修改（特别注意：要把useStore更名为useFishStore）：

xxxxxxxxxx
20
1
// @/store/fishStore.ts
2
​
3
import { create } from "zustand";
4
​
5
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
6
const useFishStore = create<FishType>()((set) => {
7
  // 向外暴露出store的数据或方法
8
  return {
9
    // fishes相关的数据和方法
10
    // 小鱼干的数量
11
    fishes: 0,
12
    // 小鱼干自增+1
13
    incrementFishes: () => set((prevState) => ({ fishes: prevState.fishes + 1 })),
14
    // 重置小鱼干的数量
15
    resetFishes: () => set(() => ({ fishes: 0 })),
16
  };
17
});
18
​
19
export default useFishStore;
20
​

4、删除@/store/index.ts模块。

5、改造@/components/setup.tsx模块，把import useStore from "@/store"的模块导入代码改为import useBearStore from "@/store/bearStore"，并将所有用到useStore的地方更名为useBearStore。

6、改造@/components/Fishes.tsx模块，把import useStore from "@/store"的模块导入代码改为import useFishStore from "@/store/fishStore"，并将所有用到useStore的地方更名为useFishStore。

运行没有任何问题。这个用起来很简单啊，比pinia还要简单，不需要最终合并为一个文件。

2.2配置数据持久化

zustand内置了数据持久化的persist中间件，对于Multi-Store中的每个Store，我们可以自行决定是否对其进行持久化存储。例如，下面的代码演示了如何对bearStore进行持久化：

xxxxxxxxxx
38
1
import { create } from "zustand";
2
// 1、导入需要的中间件
3
import { persist } from "zustand/middleware";
4
​
5
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
6
const useBearStore = create<BearType>()(
7
  // 2、对当前 Store 中的数据进行持久化存储
8
  persist(
9
    (set, get) => {
10
      // 向外暴露出store的数据或方法
11
      return {
12
        // bears相关的数据和方法
13
        bears: 0,
14
        // 让小熊数量自增+1
15
        incrementBears: () => set((state) => ({ bears: state.bears + 1 })),
16
        // 重置bears的数量
17
        resetBears: () => set(() => ({ bears: 0 })),
18
        // 根据step步长值让bears数量自减
19
        decrementBearsByStep: (step = 1) => set((prevState) => ({ bears: prevState.bears - step })),
20
        // 延迟1秒后，让bears数量+1
21
        asyncIncrementBears: () => {
22
          setTimeout(() => {
23
            // 注意这里 get() 方法的调用，它可以获取到 store 对象，并访问 store 中的数据或方法。
24
            get().incrementBears();
25
          }, 1000);
26
        },
27
      };
28
    },
29
    // 3、必须提供一个 persist 的配置对象
30
    {
31
      // name 用来指定存储后的数据名称
32
      name: "bear-store",
33
    }
34
  )
35
);
36
​
37
export default useBearStore;
38
​

注意看右侧local storage里面值的变化，并且浏览器刷新之后，bears状态没有改变，说明值被持久化存储了。

默认情况下，数据会被持久化到localStorage中。如果想自定义存储的位置，可以借助于zustand的createJSONStorage中间件来进行配置。例如，下面的代码演示了如何把数据持久化存储到sessionStorage中：

xxxxxxxxxx
28
1
import { create } from "zustand";
2
import { persist, createJSONStorage } from "zustand/middleware";
3
​
4
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
5
const useFishStore = create<FishType>()(
6
  persist(
7
    (set) => {
8
      // 向外暴露出store的数据或方法
9
      return {
10
        // fishes相关的数据和方法
11
        // 小鱼干的数量
12
        fishes: 0,
13
        // 小鱼干自增+1
14
        incrementFishes: () => set((prevState) => ({ fishes: prevState.fishes + 1 })),
15
        // 重置小鱼干的数量
16
        resetFishes: () => set(() => ({ fishes: 0 })),
17
      };
18
    },
19
    {
20
      name: "fish-store",
21
      // storage用来自定义存储的位置。这里的sessionStorage是怎么来的？这就是WebApi，可以直接使用。
22
      storage: createJSONStorage(() => sessionStorage),
23
    }
24
  )
25
);
26
​
27
export default useFishStore;
28
​

注意看右侧session storage里面值的变化，并且浏览器刷新之后，值也没有变化，被持久化保存了。

小技巧：

在vscode中，如果鼠标选择一个函数或方法很困难，不知道结束的括号在哪里，可以使用快捷键来操作，鼠标的光标选中一个函数名或将光标放在方法的开头括号处，按两次alt+shift+rightArrow，就可以选中这个函数或方法了，这样准确得多。

2.3在Redux DevTools中调试Store中的数据

前提：浏览器安装并启用了Redux DevTools

1、从zustand/middleware中，按需导入devtools中间件：

xxxxxxxxxx
1
1
import { persist, createJSONStorage, devtools } from "zustand/middleware";

2、在create()中调用devtools()中间件：

xxxxxxxxxx
31
1
import { create } from "zustand";
2
import { persist, createJSONStorage, devtools } from "zustand/middleware";
3
​
4
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
5
const useFishStore = create<FishType>()(
6
  // 在Redux DevTools中调试当前store中的数据
7
  devtools(
8
    persist(
9
      (set) => {
10
        // 向外暴露出store的数据或方法
11
        return {
12
          // fishes相关的数据和方法
13
          // 小鱼干的数量
14
          fishes: 0,
15
          // 小鱼干自增+1
16
          incrementFishes: () => set((prevState) => ({ fishes: prevState.fishes + 1 })),
17
          // 重置小鱼干的数量
18
          resetFishes: () => set(() => ({ fishes: 0 })),
19
        };
20
      },
21
      {
22
        name: "fish-store",
23
        // storage用来自定义存储的位置
24
        storage: createJSONStorage(() => sessionStorage),
25
      }
26
    )
27
  )
28
);
29
​
30
export default useFishStore;
31
​

3、另外，devtools中间件还允许提供一个可选的配置对象，可通过name属性指定store在调试框中显示的名称：

xxxxxxxxxx
1
1
devtools(参数1,{name:'fishStore'})

xxxxxxxxxx
34
1
import { create } from "zustand";
2
import { persist, createJSONStorage, devtools } from "zustand/middleware";
3
​
4
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
5
const useFishStore = create<FishType>()(
6
  // 在Redux DevTools中调试当前store中的数据
7
  devtools(
8
    persist(
9
      (set) => {
10
        // 向外暴露出store的数据或方法
11
        return {
12
          // fishes相关的数据和方法
13
          // 小鱼干的数量
14
          fishes: 0,
15
          // 小鱼干自增+1
16
          incrementFishes: () => set((prevState) => ({ fishes: prevState.fishes + 1 })),
17
          // 重置小鱼干的数量
18
          resetFishes: () => set(() => ({ fishes: 0 })),
19
        };
20
      },
21
      {
22
        name: "fish-store",
23
        // storage用来自定义存储的位置
24
        storage: createJSONStorage(() => sessionStorage),
25
      }
26
    ),
27
    {
28
      name: "fishStore",
29
    }
30
  )
31
);
32
​
33
export default useFishStore;
34
​

2.4使用immer简化数据的变更操作

如果是复杂结构的数据，更改起来会非常麻烦，使用immer可以简化数据的操作，复杂数据的纯函数写法我还真的没有写过。

如果文件里面导入了immer，可以使用immer的方式来修改数据，但按照以前的方式来修改数据也是没有问题的，都是兼容的。比如说重置方法：set({bears:0})，如果使用immer的写法，需要写成这样：set(prevState => {prevState.bears = 0})，反而更麻烦，所以具体按照哪种方法来修改数据，要看情况。

1、运行如下命令，安装immer依赖包：

xxxxxxxxxx
2
1
# 注意 immer 是 zustand 的内置依赖项，只需要安装到项目中即可。这是什么意思？意思是zustand里面用到了immer（肯定是有immer才起作用，没有安装immer的话，zustand里面的immer就不使用。所以刚开始使用zustand，没有安装immer也不会报错。），直接拿zustand的immer相关函数过来使用即可， immer 这个第三方库不需要单独导入，而是通过zustand里面的immer来导入。
2
npm i immer -S

2、按需导入 immer 中间件：

xxxxxxxxxx
1
1
import {immer} from "zustand/middleware/immer"

3、在create()中，调用immer()中间件：

xxxxxxxxxx
31
1
import { create } from "zustand";
2
// 1、导入需要的中间件
3
import { persist } from "zustand/middleware";
4
// 4、按需导入 immer 中间件
5
import { immer } from "zustand/middleware/immer";
6
​
7
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
8
const useBearStore = create<BearType>()(
9
  // 5、使用 immer 简化数据的变更操作
10
  immer(
11
    // 2、对当前 Store 中的数据进行持久化存储
12
    persist(
13
      (set, get) => {
14
        // 向外暴露出store的数据或方法
15
        return {
16
          // bears相关的数据和方法
17
          bears: 0,
18
          //  .......省略其它的方法，在下一步中会详细写明
19
        };
20
      },
21
      // 3、必须提供一个 persist 的配置对象
22
      {
23
        // name 用来指定存储后的数据名称
24
        name: "bear-store",
25
      }
26
    )
27
  )
28
);
29
​
30
export default useBearStore;
31
​

4、基于 immer 的语法，简化数据的变更操作。在set(fn)的fn回调函数中，可以直接修改原数据对象。下面的代码是基于 immer 语法修改后的 actions 函数：

xxxxxxxxxx
55
1
import { create } from "zustand";
2
// 1、导入需要的中间件
3
import { persist } from "zustand/middleware";
4
// 4、按需导入 immer 中间件
5
import { immer } from "zustand/middleware/immer";
6
​
7
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
8
const useBearStore = create<BearType>()(
9
  // 5、使用 immer 简化数据的变更操作
10
  immer(
11
    // 2、对当前 Store 中的数据进行持久化存储
12
    persist(
13
      (set, get) => {
14
        // 向外暴露出store的数据或方法
15
        return {
16
          // bears相关的数据和方法
17
          bears: 0,
18
          // 让小熊数量自增+1
19
          incrementBears: () =>
20
            set((prevState) => {
21
              // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
22
              prevState.bears += 1;
23
            }),
24
          // 重置bears的数量
25
          resetBears: () =>
26
            set((prevState) => {
27
              // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
28
              prevState.bears = 0;
29
            }),
30
          // 根据step步长值让bears数量自减
31
          decrementBearsByStep: (step = 1) =>
32
            set((prevState) => {
33
              // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
34
              prevState.bears -= step;
35
            }),
36
          // 延迟1秒后，让bears数量+1
37
          asyncIncrementBears: () => {
38
            setTimeout(() => {
39
              // 注意这里 get() 方法的调用，它可以获取到 store 对象，并访问 store 中的数据或方法。
40
              get().incrementBears();
41
            }, 1000);
42
          },
43
        };
44
      },
45
      // 3、必须提供一个 persist 的配置对象
46
      {
47
        // name 用来指定存储后的数据名称
48
        name: "bear-store",
49
      }
50
    )
51
  )
52
);
53
​
54
export default useBearStore;
55
​

效果：

2.5zustand官方对于中间件调用顺序的说明

原文地址请参考：Zustand TypeScript Guide - using-middlewares

https://docs.pmnd.rs/zustand/guides/typescript

以下内容节选自 zustand 官方文档：

Also, we recommend using devtools middleware as last as possible. For example, when you use it with immer as a middleware, it should be immer(devtools(...)) and not devtools(immer(...)). This is becausedevtools mutates the setState and adds a type parameter on it, which could get lost if other middlewares (like immer) also mutate setState before devtools. Hence using devtools at the end makes sure that no middlewares mutate setState before it.

翻译成中文，大概意思是：

此外，我们建议尽可能最后使用 devtools 中间件。例如，当您将它与 immer 一起用作中间件时，它应该是immer(devtools(...))而不是devtools(immer(...))。

这是因为 devtools 改变了 setState ，并在其上添加了一个类型参数，如果其它中间件（如immer）也在devtools之前改变了setState，那么这个参数可能会丢失。因此，在最后使用 devtools 可以确保没有中间件在它之前改变 setState。

2.6在fishStore中配置以上3个中间件

需要先配置persist中间件，再配置devtools中间件，最后配置immer中间件。最终改造完成的代码如下：

xxxxxxxxxx
41
1
import { create } from "zustand";
2
import { persist, createJSONStorage, devtools } from "zustand/middleware";
3
import { immer } from "zustand/middleware/immer";
4
​
5
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
6
const useFishStore = create<FishType>()(
7
  // 简化变更数据的操作，用到immer中间件
8
  immer(
9
    // 在Redux DevTools中调试当前store中的数据
10
    devtools(
11
      persist(
12
        (set) => {
13
          // 向外暴露出store的数据或方法
14
          return {
15
            // fishes相关的数据和方法
16
            // 小鱼干的数量
17
            fishes: 0,
18
            // 小鱼干自增+1
19
            incrementFishes: () =>
20
              set((prevState) => {
21
                prevState.fishes = 0;
22
              }),
23
            // 重置小鱼干的数量
24
            resetFishes: () => set({ fishes: 0 }),
25
          };
26
        },
27
        {
28
          name: "fish-store",
29
          // storage用来自定义存储的位置
30
          storage: createJSONStorage(() => sessionStorage),
31
        }
32
      ),
33
      {
34
        name: "fishStore",
35
      }
36
    )
37
  )
38
);
39
​
40
export default useFishStore;
41
​

效果：

2.7从Store中抽离Action函数

目前在bearStore和fishStore中，数据和函数定义在一起，随着项目规模的扩大，每个Store中的结构会显得比较混乱。我们可以把Action函数从Store的create()中抽离出来，使代码结构更加清晰。

2.7.1从fishStore中抽离Action函数

1、修改vite-env.d.ts文件中的FishType类型，把它下面所有的Action函数的类型全部注释或删除掉：

xxxxxxxxxx
5
1
type FishType = {
2
  fishes: number;
3
  // incrementFishes: () => void;
4
  // resetFishes: () => void;
5
};

2、修改@/store/fishStore.ts模块，把create()中的Action函数单独抽离出来，放到与useFishStore同层级的区域，并且暴露出去让组件使用：

用到了store的setState方法。

xxxxxxxxxx
45
1
import { create } from "zustand";
2
import { persist, createJSONStorage, devtools } from "zustand/middleware";
3
import { immer } from "zustand/middleware/immer";
4
​
5
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
6
const useFishStore = create<FishType>()(
7
  // 简化变更数据的操作，用到immer中间件
8
  immer(
9
    // 在Redux DevTools中调试当前store中的数据
10
    devtools(
11
      persist(
12
        () => {
13
          // 向外暴露出store的数据或方法
14
          return {
15
            // 小鱼干的数量
16
            fishes: 0,
17
          };
18
        },
19
        {
20
          name: "fish-store",
21
          // storage用来自定义存储的位置
22
          storage: createJSONStorage(() => sessionStorage),
23
        }
24
      ),
25
      {
26
        name: "fishStore",
27
      }
28
    )
29
  )
30
);
31
​
32
// 小鱼干自增+1
33
export const incrementFishes = () => {
34
  useFishStore.setState((prevState) => {
35
    prevState.fishes += 1;
36
  });
37
};
38
​
39
// 重置小鱼干的数量
40
export const resetFishes = () => {
41
  useFishStore.setState({ fishes: 0 });
42
};
43
​
44
export default useFishStore;
45
​

3、改造@/components/Fishes.tsx中的代码如下：

xxxxxxxxxx
17
1
import { FC } from 'react'
2
// 导入具体方法的方式需要更改
3
import useFishStore, { incrementFishes, resetFishes } from '@/store/fishStore'
4
​
5
export const Fishes: FC = () => {
6
    // 基于selector获取需要的数据或方法
7
    const fishes = useFishStore(state => state.fishes)
8
​
9
    return (
10
        <>
11
            <h3>小鱼干的数量：{fishes}</h3>
12
            {/* 绑定点击事件处理函数 */}
13
            <button onClick={incrementFishes}>fishes+1</button>
14
            <button onClick={resetFishes}>重置小鱼干的数量</button>
15
        </>
16
    )
17
}

2.7.2从bearStore中抽离Action函数

1、修改vite-env.d.ts文件中的BearType类型，把它下面所有的Action函数的类型注释或删除掉：

xxxxxxxxxx
7
1
type BearType = {
2
  bears: number;
3
//   incrementBears: () => void;
4
//   resetBears: () => void;
5
//   decrementBearsByStep: (step?: number) => void;
6
//   asyncIncrementBears: () => void;
7
};

2、修改@/store/bearState.ts模块，把create()中的Action函数单独抽离出来：

xxxxxxxxxx
62
1
import { create } from "zustand";
2
// 1、导入需要的中间件
3
import { persist, devtools } from "zustand/middleware";
4
// 4、按需导入 immer 中间件
5
import { immer } from "zustand/middleware/immer";
6
​
7
// 这里的set是一个函数，是zustand对外提供的一个参数，用来修改store中的数据
8
const useBearStore = create<BearType>()(
9
  // 5、使用 immer 简化数据的变更操作
10
  immer(
11
    devtools(
12
      // 2、对当前 Store 中的数据进行持久化存储
13
      persist(
14
        () => {
15
          // 向外暴露出store的数据
16
          return {
17
            bears: 0,
18
          };
19
        },
20
        // 3、必须提供一个 persist 的配置对象
21
        {
22
          // name 用来指定存储后的数据名称
23
          name: "bear-store",
24
        }
25
      ),
26
      {
27
        name: "bear-store",
28
      }
29
    )
30
  )
31
);
32
​
33
// 让小熊数量自增+1
34
export const incrementBears = () =>
35
  useBearStore.setState((prevState) => {
36
    // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
37
    prevState.bears += 1;
38
  });
39
​
40
// 重置bears的数量
41
export const resetBears = () =>
42
  useBearStore.setState((prevState) => {
43
    // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
44
    prevState.bears = 0;
45
  });
46
​
47
// 根据step步长值让bears数量自减
48
export const decrementBearsByStep = (step = 1) =>
49
  useBearStore.setState((prevState) => {
50
    // ☆☆☆ 请注意这里的 {} ，改用 immer 语法后，必须使用 {} 把修改数据的代码包裹起来
51
    prevState.bears -= step;
52
  });
53
​
54
// 延迟1秒后，让bears数量+1
55
export const asyncIncrementBears = () => {
56
  setTimeout(() => {
57
    incrementBears();
58
  }, 1000);
59
};
60
​
61
export default useBearStore;
62
​

3、改造@/components/setup.tsx中的代码如下：

xxxxxxxxxx
50
1
import { FC } from 'react'
2
import useBearStore, { incrementBears, resetBears, asyncIncrementBears, decrementBearsByStep } from '@/store/bearStore'
3
​
4
export const Father: FC = () => {
5
​
6
    const bears = useBearStore(state => state.bears)
7
    return <>
8
        <h3>Father组件</h3>
9
        <p>小熊的数量是：{bears}</p>
10
        <hr />
11
        <Son1 />
12
        <hr />
13
        <Son2 />
14
        <hr />
15
        <Son3 />
16
    </>
17
}
18
​
19
const Son1: FC = () => {
20
    return (
21
        <>
22
            <h5>Son1子组件</h5>
23
            {/* 绑定为按钮的点击事件处理函数 */}
24
            <button onClick={incrementBears}>bears+1</button>
25
            <button onClick={asyncIncrementBears}>1秒后bears+1</button>
26
        </>
27
    )
28
}
29
​
30
const Son2: FC = () => {
31
    return (
32
        <>
33
            <h5>Son2子组件</h5>
34
            {/* 直接把函数绑定为按钮的点击事件处理函数 */}
35
            <button onClick={resetBears}>重置bears</button>
36
        </>
37
    )
38
}
39
​
40
const Son3: FC = () => {
41
    const decrement = () => {
42
        decrementBearsByStep(5)
43
    }
44
    return (
45
        <>
46
            <h5>Son5子组件</h5>
47
            <button onClick={decrement}>自减-5</button>
48
        </>
49
    )
50
}

运行效果如下：

2.8重置所有Store中的数据

方案1

将所有store的重置函数都执行一遍，就可以重置所有store中的数据了。

xxxxxxxxxx
25
1
// @/components/Fishes.tsx
2
​
3
import type { FC } from 'react'
4
import useFishStore, { incrementFishes, resetFishes } from '@/store/fishStore'
5
import { resetBears } from '@/store/bearStore'
6
​
7
export const Fishes: FC = () => {
8
    // 基于selector获取需要的数据或方法
9
    const fishes = useFishStore(state => state.fishes)
10
​
11
    const resetAllStore = () => {
12
        resetFishes();
13
        resetBears();
14
    }
15
​
16
    return (
17
        <>
18
            <h3>小鱼干的数量：{fishes}</h3>
19
            {/* 绑定点击事件处理函数 */}
20
            <button onClick={incrementFishes}>fishes+1</button>
21
            <button onClick={resetFishes}>重置小鱼干的数量</button>
22
            <button onClick={resetAllStore}>重置所有store中的数据</button>
23
        </>
24
    )
25
}

效果：

方案2

1、在@/store目录下新建tools/文件夹，并在@/store/tools目录下，新建resetters.ts模块，代码如下：

xxxxxxxxxx
8
1
// (() => void)[] 是resetters 的类型，即：
2
// resetters 是一个数组
3
// resetters 是一个函数的数组，每个函数的类型为 () => void
4
​
5
const resetters: (() => void)[] = [];
6
​
7
// 默认导出 resetters 数组
8
export default resetters;

2、修改@/store/bearStore.ts模块，按照如下4个步骤提供初始数据和添加 resetter 函数。核心代码如下：

xxxxxxxxxx
56
1
import { create } from "zustand";
2
import { persist, devtools } from "zustand/middleware";
3
import { immer } from "zustand/middleware/immer";
4
// 3、导入 resetters 数组
5
import resetters from "@/store/tools/resetters";
6
​
7
// 1、定义 bearStore 的初始数据对象
8
const initBearState = {
9
  bears: 0,
10
};
11
​
12
const useBearStore = create<BearType>()(
13
  immer(
14
    devtools(
15
      persist(
16
        (set) => {
17
          // 4、把 bearStore 的resetter函数添加到 resetters 数组中
18
          resetters.push(() => set(initBearState));
19
          return {
20
            // 2、为 store 提供初始数据
21
            ...initBearState,
22
          };
23
        },
24
        {
25
          name: "bear-store",
26
        }
27
      ),
28
      {
29
        name: "bear-store",
30
      }
31
    )
32
  )
33
);
34
​
35
export const incrementBears = () =>
36
  useBearStore.setState((prevState) => {
37
    prevState.bears += 1;
38
  });
39
​
40
export const resetBears = () =>
41
  useBearStore.setState((prevState) => {
42
    prevState.bears = 0;
43
  });
44
​
45
export const decrementBearsByStep = (step = 1) =>
46
  useBearStore.setState((prevState) => {
47
    prevState.bears -= step;
48
  });
49
​
50
export const asyncIncrementBears = () => {
51
  setTimeout(() => {
52
    incrementBears();
53
  }, 1000);
54
};
55
​
56
export default useBearStore;