ngxs 状态运算符插入或替换数组中的项目（upsert）

Question

我正在尝试用现有的 ngxs 状态运算符替换或插入数组项 (upsert)。我目前正在使用以下 iif 语句。有更简单的方法吗？

setState(
  patch({
    contractList: iif<Contract[]>(
      contractList=>
        contractList.some(
          contract =>
            contract.id === contractId
        ),
      updateItem<Contract>(
        contract =>
          contract.id === contractId,
        patch(loadedContract)
      ),
      insertItem<Contract>(loadedContract)
    )
  })
)

Answer 1

状态运算符存在，但这并不意味着您被迫使用它们，对吧。有一个食谱叫做Immutability Helpers。将在 1-2 周内发布到主站点。

如果我们谈论状态运算符，那么可以创建自定义运算符，这是某种分解：

function insertOrUpdateContract(id: string, loadedContract?: Contract) {
  return iif<Contract[]>(
    contracts => contracts.some(contract => contract.id === id),
    updateItem(contract => contract.id === id, patch(loadedContract)),
    insertItem(loadedContract)
  );
}

因此，您的操作处理程序中的代码会更少，并且会更具自我描述性：

ctx.setState(
  patch({ contractList: insertOrUpdateContract(contractId, loadedContract) })
);

否则您可以使用 immer 库或其他首选的东西，这样可以节省更多代码：

import { produce } from 'immer';

const state = produce(ctx.getState(), draft => {
  const index = draft.contractList.findIndex(contract => contract.id === contractId);
  // It exists then let's update
  if (index > -1) {
    draft.contractList[index] = loadedContract;
  } else {
    draft.contractList.push(loadedContract);
  }
});

ctx.setState(state);

当然 immer 是该项目的附加包，但它非常轻量级。它提供了更具声明性的方式来执行此类不可变更新。选择最适合你的！

当涉及到如此复杂的状态更新时，我会停止使用一些不变性助手。

ngxs 状态运算符插入或替换数组中的项目（upsert）

ngxs state operator to insert or replace item in array (upsert)

ngxs