1

我想将我的 zustand 状态分解为更小的可重用对象；但是，记录在案的 zustand 模式似乎都涉及将操作提升到顶级存储对象。有没有办法允许内部对象发生突变，而不必为每个对象重复每个操作？

例如，假设我们有一个车辆对象：

function makeVehicle() {
  return { going: false };
}
function startVehicle(vehicle) {
  return { ...vehicle, going: true };
}
function stopVehicle(vehicle) {
  return { ...vehicle, going: false };
}

我可以有一个包含两个命名车辆的状态

import { create } from 'zustand';
export default create(set => {
  blueVehicle: makeVehicle(),
  greenVehicle: makeVehicle()
});

但是，似乎如果我还想导出 mutators，我需要为每个对象重复每个操作，并带有相当多的样板：

import { create } from 'zustand';
export default create(set => {
  blueVehicle: makeVehicle(),
  startBlueVehicle: () => set(
    state => ({ blueVehicle: startVehicle(state.blueVehicle) })
  ),
  stopBlueVehicle: () => set(
    state => ({ blueVehicle: stopVehicle(state.blueVehicle) })
  ),
  greenVehicle: makeVehicle(),
  startGreenVehicle: () => set(
    state => ({ greenVehicle: startVehicle(state.greenVehicle) })
  ),
  stopGreenVehicle: () => set(
    state => ({ greenVehicle: stopVehicle(state.greenVehicle) })
  )
});

有没有更简单的表达方式？

4

1 回答 1

2

对于这个特定示例，我将按如下方式构造原始状态：

import { create } from 'zustand';

export default create(set => {
  blueVehicle: makeVehicle(),
  greenVehicle: makeVehicle(),
  startVehicleByName: (vehicleName) => set(
    state => ({ [vehicleName]: startVehicle(state[vehicleName]) })
  ),
  stopVehicleByName: (vehicleName) => set(
    state => ({ [vehicleName]: stopVehicle(state[vehicleName]) })
  )
});

这样，如果你想启动蓝色车辆，你可以调用startVehicleByName('blueVehicle')

或者如果你想停下绿色车辆，你可以打电话stopVehicleByName('greenVehicle')

正如zustand 自述文件中所指出的，您可以在商店中放置任何东西。因此，将带有（可能是任意数量）参数的函数放入其中并没有错。

zustand 的最大卖点之一（至少对我而言）是它允许的自由度。它是无主见的，因此如果需要它们，您可以在那里实现强大的通量模式，或者从它那里退后并减少样板文件，以用于更简单的应用程序（或应用程序的一部分）。

于 2021-07-13T00:23:20.947 回答