@onoxm/zustand-tools

基于 Zustand 的 TypeScript 工具库，提供灵活的 store hook，支持多种状态选择模式。

安装

npm install @onoxm/zustand-tools
# 或者
yarn add @onoxm/zustand-tools
# 或者
pnpm add @onoxm/zustand-tools

前置依赖

需要在项目中安装 zustand (版本 >= 5)：

npm install zustand

API

createStoreHook

将 Zustand 的 useStore 包装为灵活的 hook，支持多种选择模式，并自动使用 shallow 比较优化性能。

签名

function createStoreHook<T extends Record<string, unknown>>(
  useStore: UseBoundStore<StoreApi<T>>
): {
  (): T                                                    // 获取全部状态
  <R>(selector: (state: T) => R): R                        // 选择器函数
  <K extends keyof T>(key: K): T[K]                        // 单个 key
  <K extends keyof T>(keys: K[], include?: true): Pick<T, K> // 多个 keys
  setState: StoreApi<T>['setState']
}

使用示例

import { create } from 'zustand'
import { createStoreHook } from '@onoxm/zustand-tools'

// 1. 定义 store
const useCounterStore = create<{
  count: number
  name: string
  increment: () => void
  decrement: () => void
}>((set) => ({
  count: 0,
  name: 'Counter',
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// 2. 用 createStoreHook 包装
const useCounter = createStoreHook(useCounterStore)

// 3. 使用
function Counter() {
  // 获取全部状态
  const all = useCounter()

  // 选择器函数
  const double = useCounter((state) => state.count * 2)

  // 单个 key
  const count = useCounter('count')

  // 多个 keys
  const { count, name } = useCounter(['count', 'name'])

  // 使用 setState
  const handleIncrement = () => {
    useCounter.setState((state) => ({ count: state.count + 1 }))
  }

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleIncrement}>+</button>
    </div>
  )
}

特性

• 🔥 类型安全，完整的 TypeScript 支持
• 🎯 多种选择模式：全部状态、选择器函数、单个 key、多个 keys
• ⚡ 自动使用 shallow 比较优化性能
• 📦 轻量级，无额外依赖

作者

ono

License

MIT