Zustand：让React状态管理更简单、更高效

Zustand

这个单词在德语里是状态的意思（发音：促stand）

1. 下载zustand

npm i zustand     

或者

yarn add zustand

2.创建一个store

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

因为zustand会帮你自动合并第一层state，我们这里的bears就是第一层的state；所以我们不需要这里的…;如果你有更深层的状态，第二层第三层的状态，还是需要…的。

因为我项目使用的ts，故而需要加类型：

import { create } from 'zustand'

type stateType ={
  bears:number;
  increasePopulation:()=>void;
  removeAllBears:()=>void;
}

export const useBearStore = create<stateType>()((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

3.使用方法

这里的useBearStore其实就是一个hook，so可以很方便的被调用；不需要像redux或者useConext那样外面包一层传送门。
然后在componets里面建立一个文件BearBox。

import { Button } from 'antd';

export const BearBox = () => {
  return (
    <div>
      <h1>BearBox</h1>
      <div>
        <Button>add bear</Button>
        <Button>remove bear</Button>
      </div>
    </div>
  );
};

怎么使用useBearStore？：
zustand特别的就是你可以直接从components访问store里的state，不需要在components外面包裹任何context provider；
直接使用useBearStore这个hook;里面参数是一个callback，这个callback给了一个state，这个state就是store里所有的state，然后你可以用它返回你所需要的所有新的state。