react状态管理工具-zustand
·
zustand 最方便的一点是不需要想redux,context那样通过Provider注入 value的形式,而且不用区分同步操作异步操作,极其简单的切片化管理
直接上使用教程
// 定义,可通过create创建多个不同实例
export const useStore = create((set,get) => ({
age: 12,
name: '张三',
changeAge: (age) => set(() => ({ age })),
asyncName: async () => {
const userName = await getName()
set({name:userName})
}
}))
// store切片式管理(注意属性名相同会覆盖的问题)
const createAge = (set,get,api) => ({
age: 0,
changeAge:(age => set({age}))
})
const createName = (set,get,api) => ({
name: 'kkk',
asyncName: async () => {
const userName = await getName()
set({name:userName})
}
})
export const useStore = create((...arg) => ({
...createAge(...arg),
...createName(...arg),
}))
// 使用,结构出来的值页面可直接使用
const [age, userName, asyncName] = useStore((state: any) => [state.age, state.name, state.asyncName]);
const state = useStore() // 返回整个state
// 配合useCallback-记忆选择器
const like = useStore(useCallback((state) => state.likes[type]),[type])
// 改变state
// 可以通过create内部定义改变方法,也可以通过useStore的setState方法进行修改changeAge,asyncName
useStore.setState({ name: '888888888888888' });
useStore.getState(); // 获取
useStore.destroy(); // 销毁store,删除所有订阅
更多推荐
所有评论(0)