Zustand
  • 简体中文

      • subscribeWithSelector

      subscribeWithSelector 中间件让你可以基于当前状态订阅特定的数据。

      const nextStateCreatorFn = subscribeWithSelector(stateCreatorFn)

      类型

      签名

      subscribeWithSelector<T>(stateCreatorFn: StateCreator<T, [], []>): StateCreator<T, [['zustand/subscribeWithSelector', never]], []>

      Mutator

      ;['zustand/subscribeWithSelector', never]

      参考

      subscribeWithSelector(stateCreatorFn)

      参数

      • stateCreatorFn：一个以 set 函数、get 函数和 store 为参数的函数。通常，你会返回一个对象，其中包含你想要暴露的方法。

      返回值

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

      用法

      订阅部分状态更新

      通过订阅部分状态更新，你注册了一个回调，每当 store 的这部分状态更新时它就会被触发。我们可以用 subscribe 来做外部状态管理。

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

type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
  setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

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

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

$dot.addEventListener('mouseenter', (event) => {
  const parent = event.currentTarget.parentElement
  const parentWidth = parent.clientWidth
  const parentHeight = parent.clientHeight

  positionStore.getState().setPosition({
    x: Math.ceil(Math.random() * parentWidth),
    y: Math.ceil(Math.random() * parentHeight),
  })
})

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((state) => state.position, render)

const logger: Parameters<typeof positionStore.subscribe>[0] = (x) => {
  console.log('new x position', { x })
}

positionStore.subscribe((state) => state.position.x, logger)

      下面是 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