Zustand
  • 简体中文

      • 自动生成选择器

      当你要使用 store 中的属性或 action 时，我们推荐使用选择器。你可以像这样从 store 中访问值：

      const bears = useBearStore((state) => state.bears)

      不过，手动编写这些选择器可能会很繁琐。如果你遇到这种情况，可以自动生成选择器。

      创建以下函数：createSelectors

      import { StoreApi, UseBoundStore } from 'zustand'

type WithSelectors<S> = S extends { getState: () => infer T }
  ? S & { use: { [K in keyof T]: () => T[K] } }
  : never

const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(_store: S) => {
  const store = _store as WithSelectors<typeof _store>
  store.use = {}
  for (const k of Object.keys(store.getState())) {
    ;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
  }

  return store
}

      如果你有一个这样的 store：

      interface BearState {
  bears: number
  increase: (by: number) => void
  increment: () => void
}

const useBearStoreBase = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
  increment: () => set((state) => ({ bears: state.bears + 1 })),
}))

      把该函数应用到你的 store 上：

      const useBearStore = createSelectors(useBearStoreBase)

      现在选择器已经自动生成，你可以直接访问它们：

      // get the property
const bears = useBearStore.use.bears()

// get the action
const increment = useBearStore.use.increment()

      原生 store

      如果你使用的是原生 store，请使用下面这个 createSelectors 函数：

      import { StoreApi, useStore } from 'zustand'

type WithSelectors<S> = S extends { getState: () => infer T }
  ? S & { use: { [K in keyof T]: () => T[K] } }
  : never

const createSelectors = <S extends StoreApi<object>>(_store: S) => {
  const store = _store as WithSelectors<typeof _store>
  store.use = {}
  for (const k of Object.keys(store.getState())) {
    ;(store.use as any)[k] = () => useStore(_store, (s) => s[k as keyof typeof s])
  }

  return store
}

      用法与 React store 相同。如果你有一个这样的 store：

      import { createStore } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
  increment: () => void
}

const store = createStore<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
  increment: () => set((state) => ({ bears: state.bears + 1 })),
}))

      把该函数应用到你的 store 上：

      const useBearStore = createSelectors(store)

      现在选择器已经自动生成，你可以直接访问它们：

      // get the property
const bears = useBearStore.use.bears()

// get the action
const increment = useBearStore.use.increment()

      在线示例

      关于这个用法的可运行示例，请参阅 Code Sandbox。

      第三方库