zustand

下面是 zustand 个人最常用的写法

import { pick } from 'es-toolkit'
import { produce } from 'immer'
import { create, StateCreator } from 'zustand'
import { persist } from 'zustand/middleware'

interface FooStore {
  count: number
  deep: {
    count: number
  }
  add: () => void
}

function middleware(fn: StateCreator<FooStore>) {
  return persist(fn, {
    name: 'foo',
    version: 1,
    partialize: state => pick(state, ['count'])
  })
}

export const useFooStore = create<FooStore>()(
  middleware((set, get) => ({
    count: 1,
    deep: {
      count: 1
    },
    add: () => {
      const { count } = get()

      // 默认是浅合并
      set({
        count: count + 1
      })

      // 使用 Immer 来简化深度嵌套对象的状态更新
      // immer 中间件存在类型问题，暂时使用下面方法替代
      set(state => {
        return produce(state, draft => {
          draft.deep.count++
        })
      })
    }
  }))
) 

useShadow

import { pick } from 'es-toolkit'
import { useShallow } from 'zustand/shallow'

const { count } = useFooStore(useShallow(state => pick(state, ['count', 'add'])))