zustand

zustand教程

• 定义store

import {create} from 'zustand'

export const useUserStore = create((set, get) => ({
    zsAge: 18,
    lsAge: 18,
    updateAgeZs: (newAge) => set(state => ({zsAge: newAge})),
    updateAgeLs: (newAge) => set(state => ({lsAge: newAge})),
    nameAndAge: () => get().zsInfo.name + get().zsAge,
}))

直接使用useUserStore()会存在别的组件更新了当前组件没使用到的状态，也会造成当前组件重新渲染

const LiSi = () => {
    const {lsAge,updateAgeLs} = useUserStore()

    return <div>
        <p>我是子组件</p>
        {Math.random()*100}
        <p>我的年龄{lsAge}</p>
        <button onClick={() => updateAgeLs(14)}>更新李四年龄</button>
    </div>
}

• 精准更新

const zsAge = useUserStore(state => state.zsAge)

const ZhangSan = () => {
    const zsAge = useUserStore(state => state.zsAge)
    const updateAgeZs = useUserStore(state => state.updateAgeZs)

    return <div>
        <p>我是子组件</p>
        {Math.random()*100}
        <p>我的年龄{zsAge}</p>
        <button onClick={() => updateAgeZs(12)}>更新张三年龄</button>
    </div>
}

选择多个状态时，当其他组件更新了store的状态，当前组件也会重新渲染，可传递shallow进行优化

	import {shallow} from "zustand/shallow";
	
    const {zsAge, updateAgeZs} = useUserStore(state => ({
        zsAge: state.zsAge,
        updateAgeZs: state.updateAgeZs,
    }),shallow)

• 持久化存储 persist

import {create} from 'zustand'
import {createJSONStorage, persist} from 'zustand/middleware'

export const useUserStore = create(persist((set) => ({
    zsAge: 18,
    lsAge: 18,
    zsInfo: {
        name: '张三'
    },
    lsInfo: {
        name: '李四'
    },
    updateAgeZs: (newAge) => set(state => ({zsAge: newAge})),
    updateAgeLs: (newAge) => set(state => ({lsAge: newAge})),
}), {name: 'userStore', storage: createJSONStorage(() => localStorage)}))

• immer使用

import {createJSONStorage, persist} from 'zustand/middleware'
import {immer} from 'zustand/middleware/immer'

export const useUserStore = create(immer(persist((set) => ({
    zsInfo: {
        name: '张三'
    },
    updateName: (newState) => set((state) => {
        state.zsInfo.name = newState
    }),

}), {name: 'userStore', storage: createJSONStorage(() => localStorage)})))

• 异步

export const useUserStore = create((set) => ({
    getData: async () => {
        const res = await fetch('http://api.xx')
        const data = await res.json()
        return data
    }
}))

在外部更改状态将action抽离出来

 useUserStore.setState(state => ({
      zsAge: state.zsAge + 1
  }))