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,删除所有订阅