Zutand，个人最喜欢的react的状态管理

zustand 个人最喜欢的状态管理方法，很好用，中文文档：https://awesomedevin.github.io/zustand-vue/

个人认为他的特点的话就是轻量级，灵活，瞬时更新，原子性（对比粒度），易上手，且拥有完备的ts支持，非常好用，zustand与mobx这类比较相似

安装

pnpm i zustand

首先 store初始化

import { create } from 'zustand'

const useBearStore = create((set,get) => ({
num: number
}))

export default useBearStore

使用的话直接在组件中引入

function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <p> 订阅的数据{bears}</P>
}

这里注意一下，在引入时尽量粒度更下，例如只是需要store中的存储的某个对象的某个属性，那么只需要引入该属性即可（原子性），这样即只会在该属性发生变化时才会引起重新渲染，当然也可以使用解构赋值这些

zustand中没有明确的数据流向，与dva有很大的区别，且在处理异步与同步时都是一样的

简单的使用demo

import { create } from 'zustand'
import { persist } from "zustand/middleware"

export type bearStoreType = {
num: number,
addNum: () => void,
subtractNum: () => void,
declarNum: () => void,
fetchNum: (num: number) => Promise<void>,
updateNum: () => Promise<void>
}

const useBearStore = create<bearStoreType>()
(
persist((set, get): bearStoreType => ({
num: 0,

addNum: () => set((state: bearStoreType) => ({ num: state.num + 1 })),//加一
subtractNum: () => { set((state: bearStoreType) => ({ num: state.num - 1 })) },//减一
declarNum: () => set(() => ({ num: 0 })),//重置
fetchNum: async (num: number) => {
const response = await fetch('url');
const json = await response.json();
set({
num: json.items.length
});
},
updateNum: async () => {
console.log(get().num)
}
}), { name: 'bearStore' })
)
export default useBearStore

对异步于同步的处理其实并无什么区别，

这里处理了store持久化，zustand提供了一个中间件 persist 来进行处理，有时有那种页面刷新后表单数据不会清除的需求或则需要多页面共享数据这类需求会用到

基本使用

子组件1

import useBearStore, { bearStoreType } from "@/models"
import { useEffect } from "react"
export default () => {
const { num,subtractNum, declarNum } = useBearStore(store => store)
useEffect(() => {
return declarNum
}, [])

return <>
<button onClick={subtractNum}>子组件1，点我减一</button><br />
</>

}

子组件2

import useBearStore, { bearStoreType } from "@/models"
import { useEffect } from "react"
export default () => {
const { num, addNum, declarNum } = useBearStore(store => store) as bearStoreType
useEffect(() => {
return declarNum
}, [])

return <>
<button onClick={addNum}>子组件2，点我加一</button><br />
</>

}

父组件

import { useEffect } from "react"
import MyChildren from "./components/MyChildren"
import Mycharts from "./components/Mycharts"
import useBearStore from "@/models"
export default () => {
const { num, declarNum } = useBearStore()

useEffect(() => {
//组件卸载时清除订阅
return declarNum
}, [])

return <>
父组件,在store中订阅的数据{num}
<br />
<MyChildren />
<br />
<Mycharts />
</>

}

这里在组件卸载后清空store中的订阅

一般在开发中都会存在一个问题，就是store中的数据嵌套层级会很深，可以搭配immer这类第三方库进行处理，否则就需要使用...扩展运算符去处理

基本的使用

import produce from 'immer'

const useStore = create((set) => ({
deep: {
nested: {
obj: { count: 0 },
}
},
immerInc: () =>
set(
produce((state: State) => {
++state.deep.nested.obj.count
})
),
}))

const immerInc = useStore((state) => state.immerInc)
immerInc()