这个单词在德语里是状态的意思(发音:促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。