前言

社区中的react的状态管理工具有很多,大家一般都使用readux来进行状态管理.但是在实际上手中,我发现redux为了实现一个小功能,需要编写太多的代码.可能在大型多人运作的项目中适合规范化的编写来统一风格.但是在中小型的项目中,有点复杂了,所以今天介绍下react社区中挺火的状态管理工具 -Zustand

使用

使用方法很简单,以下为官方案例.

• 可以注意到,和其他状态管理不同的是,Zustand中的store可以包含任何类型,无论是原语、对象、函数.
• 使用create方法中的set函数来进行state的更新,state是不可变的,因此使用set函数来返回新的state,根据官方文档的描述,set 实际上是个merges state,因此set直接返回需要修改的state部分即可

定义一个store

import create from 'zustand'

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

获取store

然后就愉快的通过上面创建的自定义hooks useBearStore获取状态了

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

工程化使用

在实际项目中,我们会保存很多state,这时候可以把store分成不同的部分,以便更好的维护;

我们可以在store目录中创建多个state文件并导出,并将文件命名为xxxSlice

• 注意,如果我们使用Typescript,可以用官方提供的泛型StateCreator<T,Mis,Mos,U>来对state的类型进行包裹,这样set方法中的参数state都会被推导出来

import {StateCreator} from 'zustand'
export interface UserSliceState {
  userName:string
}
export const createUserSlice: StateCreator<UserSliceState> = (set) => ({
  userName: 'name',
  setuUserName: () => set((state) => ({ userName: state.userName + '-' })),
})

最后统一在index中集合起来:

import create from 'zustand'
import {UserSliceState, createUserSlice} from './userSlice'

const useStore = create<UserSliceState>((...a) => ({
  ...createUserSlice(...a)
  //...createOtherSlice(...a)
}))

export default useStore

或者也可以像pinia一样,每个store分开管理,不同store用不同的hooks获取.