Zustand
  • 简体中文

      • combine

      combine 中间件通过把初始状态与一个状态创建函数合并，让你创建出一个统一的状态，该状态创建函数会添加新的状态切片和 action。这非常有用，因为它会自动推断类型，因此无需显式定义类型。

      TIP

      这让状态管理更直接、更高效，因为在使用中间件时不再需要 create 和 createStore 的柯里化版本。

      const nextStateCreatorFn = combine(initialState, additionalStateCreatorFn)

      类型

      签名

      combine<T extends object, U extends object>(initialState: T, additionalStateCreatorFn: StateCreator<T, [], [], U>): StateCreator<Omit<T, keyof U> & U, [], []>

      参考

      combine(initialState, additionalStateCreatorFn)

      参数

      • initialState：你希望状态在初始时具有的值。它可以是任何类型的值，但不能是函数。
      • additionalStateCreatorFn：一个以 set 函数、get 函数和 store 为参数的函数。通常，你会返回一个对象，其中包含你想要暴露的方法。

      返回值

      combine 返回一个状态创建函数。

      用法

      创建带类型推断的 store

      这个示例展示了如何创建一个 store 并让类型被自动推断，因此你不需要显式定义类型。

      import { createStore } from 'zustand/vanilla'
import { combine } from 'zustand/middleware'

const positionStore = createStore(
  combine({ position: { x: 0, y: 0 } }, (set) => ({
    setPosition: (position) => set({ position }),
  })),
)

const $dotContainer = document.getElementById('dot-container') as HTMLDivElement
const $dot = document.getElementById('dot') as HTMLDivElement

$dotContainer.addEventListener('pointermove', (event) => {
  positionStore.getState().setPosition({
    x: event.clientX,
    y: event.clientY,
  })
})

const render: Parameters<typeof positionStore.subscribe>[0] = (state) => {
  $dot.style.transform = `translate(${state.position.x}px, ${state.position.y}px)`
}

render(positionStore.getInitialState(), positionStore.getInitialState())

positionStore.subscribe(render)

      下面是 html 代码

      <div id="dot-container" style="position: relative; width: 100vw; height: 100vh;">
  <div
    id="dot"
    style="position: absolute; background-color: red; border-radius: 50%; left: -10px; top: -10px; width: 20px; height: 20px;"
  ></div>
</div>

      疑难解答

      TBD