NGXS：更新深层嵌套数组状态

Question

因此，我有以下状态：

[
   {
      name: "Main Tree",
      branches: [
        {
          name: "Branch 1",
          branches: []
        },
        {
          name: "Branch 2",
          branches: [
            {
              name: "Sub Branch 1",
              branches: []
            }
          ]
        }
      ]
   }
]

我的问题是，如何使用状态操作员在分支中附加另一个分支 sub Branch 1 ？我在此，但它将数据从数组转换为不是所需输出的对象。

同样，上面的情况只是一个示例，我的用例是它可能是内部有分支的无限级分支。

先感谢您。

Answer 1

这应该适用于上述示例：

// import { append, patch, updateItem } from '@ngxs/store/operators';

interface BranchTree {
  name: string;
  branches: BranchTree[];
}

type BranchStateModel = Array<BranchTree>;

//..
@Action(UpdateSubBranch)
updateSubBranch({ setState }: StateContext<BranchStateModel>) {
  const newBranch: BranchTree = {
    name: 'Sub 1 of Sub Branch 1',
    branches: [],
  };
  setState(
    updateItem(
      (branch) => branch.name === 'Main Tree',
      patch({
        branches: updateItem<BranchTree>(
          (subBranch) => subBranch.name === 'Branch 2',
          patch({
            branches: updateItem<BranchTree>(
              (subBranch) => subBranch.name === 'Sub Branch 1',
              patch({ branches: append([newBranch]) })
            ),
          })
        ),
      })
    )
  );
}

但是，您需要根据上述解决方案为无限树实施递归解决方案。

在此处阅读有关NGXS州运营商的更多信息： https://wwww.ngxs.io/ v/v3.7/高级/操作员

Answer 2

的嵌套阵列

tasks
   table
      cols: [{...}, {...}, {etc}]
      rows: [{...}, {...}, {etc}]

对于像我成功使用

ctx.setState(
  patch({
    table: patch({
      rows: iif<any>(
        (tasks) => tasks?.some((task: any) => task.id === updatedTask?.id),
        updateItem<any>((task: any) => task.id === updatedTask?.id, patch(updatedTask))
      ),
    }),
  }),
)

。我有一个NGXS迭代器的建议，我认为这是严重缺失的。
我稍后再进行更新。