快速入门zustand,2分钟搭建属于react的全局状态管理

redux和react-redux实在是太繁琐了,写下一套下来花费的时间实在是太多了.那么我们就来用用最新的替代zustand.在ts环境下的使用.

1.下载cnpm i zustand

2.创建store文件夹,创建index.tsx文件

import { create } from "zustand";

interface Bear{
    num:number;
    [k:string]:any
}

const useStore = create<Bear>((set)=>({
   num:12,
   addnum: () => set(state => ({ num: state.num + 1 })),
   subtractnum: () => set(state => ({ num: state.num - 1 })),
}))

export default useStore

3.引入到页面中

import useStore from '../../store/Index';
export default function RegisterView() {

    const num = useStore((state) =>state.num) //定义的状态
    const add = useStore((state) =>state.addnum) //定义的方法
  
    
  return (
    <div>
    <div>RegisterView</div>
    <div>{num}</div>
    <Button type="primary" onClick={() => {add()}}>Primary Button</Button>
    </div>

  )
}