@spliu/zustand-immer NPM

@spliu/zustand-immer

一个基于 Immer 的 patch 特性的轻量级状态管理解决方案，具有撤销/重做功能。受 zundo 库的启发。

核心特点

🎯 使用 Immer 的 patch 特性实现高效的状态管理
⚡ 只存储状态差异（patches），而不是完整的状态副本
🔄 内置撤销/重做功能
🎮 轻松集成到现有的 Zustand 存储中
📦 小型包大小
💪 TypeScript 支持

为什么使用 Patches？

与存储完整的状态快照相比，这个库使用 Immer 的 patch 特性来存储状态之间的差异（patches）。这种方法显著减少了内存使用量并提高了性能，特别是在处理大型状态对象时。

安装

npm install @spliu/zustand-immer
# 或
yarn add @spliu/zustand-immer

基础使用

import { zustandPatchUndo } from '@spliu/zustand-immer'
import { create } from 'zustand'

interface Store {
  count: number
  text: string
  increase: () => void
  decrease: () => void
  setText: (text: string) => void
}

const useStore = create<Store>()(
  zustandPatchUndo(set => ({
    count: 0,
    text: '',
    increase: () => set(state => ({ count: state.count + 1 })),
    decrease: () => set(state => ({ count: state.count - 1 })),
    setText: (text: string) => set({ text }),
  })),
)

// 在组件中使用
function MyComponent() {
  const { count, text, increase, decrease, setText } = useStore()
  const { undo, redo, clear, redoStack, undoStack } = useStore.temporal.getState()

  return (
    <>
      <div>
        Redo Stack:
        {JSON.stringify(redoStack)}
      </div>
      <div>
        Undo Stack:
        {JSON.stringify(undoStack)}
      </div>
      <div>
        Count:
        {count}
      </div>
      <div>
        Text:
        {text}
      </div>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={() => setText('hello')}>Set Text</button>
      <button onClick={() => undo()}>Undo</button>
      <button onClick={() => redo()}>Redo</button>
      <button onClick={clear}>Clear History</button>
    </>
  )
}