Angular ngrx-使用对象内部的数组更新存储

我有这样的效果：

loadFolder$ = createEffect(() => {
return this.action$.pipe(
  ofType(SidebarAction.loadFirmSuccess),
  switchMap(action => {
    const foldersList = {};

    if(!action.selectedFirm) {
      action.firms[0].roles.map((role: string) => {
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.firms[0].id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    else {
      action.selectedFirm.roles.map((role: string) => {
        // tslint:disable-next-line: no-non-null-assertion
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.selectedFirm!.id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    return forkJoin(foldersList).pipe(map(res => {
      return SidebarAction.loadFolderSuccess({folders : res, selectedFirm: action.selectedFirm});
    }));
  })
);
});

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}], {page: 1, size: 2}, {amount: 4}]
 }
 

  folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}, {idFolder: 3, folderName: 'folder3'}, {idFolder: 4, folderName: 'folder4'}],{page: 2, size: 2},{amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}]
 }

它返回的文件夹对象如下

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}]
 }

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}]
 }

并非所有的钥匙都存在……这要看情况而定

这就是问题所在，我有这样的第一个结果：

loadFolder$ = createEffect(() => {
return this.action$.pipe(
  ofType(SidebarAction.loadFirmSuccess),
  switchMap(action => {
    const foldersList = {};

    if(!action.selectedFirm) {
      action.firms[0].roles.map((role: string) => {
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.firms[0].id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    else {
      action.selectedFirm.roles.map((role: string) => {
        // tslint:disable-next-line: no-non-null-assertion
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.selectedFirm!.id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    return forkJoin(foldersList).pipe(map(res => {
      return SidebarAction.loadFolderSuccess({folders : res, selectedFirm: action.selectedFirm});
    }));
  })
);
});

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}], {page: 1, size: 2}, {amount: 4}]
 }
 

  folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}, {idFolder: 3, folderName: 'folder3'}, {idFolder: 4, folderName: 'folder4'}],{page: 2, size: 2},{amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}]
 }

当我增加页面时，我会发送相同的操作以获得其他结果

  folders: {
    admin: [[{idFolder: 3, folderName: 'folder3'}, {idFolder: 4, folderName: 'folder4'}]{page: 2, size: 2}{amount: 4}]
 }

这是减速器：

  export const sideBarReducer = createReducer(
   initialSidebarState,
   on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
      return {
               ...state,
               folders: action.folders,
               selectedFirm : action.selectedFirm
      };
    }),
  );

action.folders可能是这样的对象

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}], {page: 1, size: 2}, {amount: 3}]
 }

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}]
 }

我想用新状态更新获取前一状态的状态，如下所示：

loadFolder$ = createEffect(() => {
return this.action$.pipe(
  ofType(SidebarAction.loadFirmSuccess),
  switchMap(action => {
    const foldersList = {};

    if(!action.selectedFirm) {
      action.firms[0].roles.map((role: string) => {
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.firms[0].id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    else {
      action.selectedFirm.roles.map((role: string) => {
        // tslint:disable-next-line: no-non-null-assertion
        foldersList[role.toLowerCase()] = this.sidebarService.getFolders(action.userId, action.selectedFirm!.id.toString() , role, action.page.toString(), action.size.toString());
      });
    }

    return forkJoin(foldersList).pipe(map(res => {
      return SidebarAction.loadFolderSuccess({folders : res, selectedFirm: action.selectedFirm});
    }));
  })
);
});

 folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}], {page: 1, size: 2}, {amount: 4}]
 }
 

  folders: {
    admin: [[{idFolder: 1, folderName: 'folder1'}, {idFolder: 2, folderName: 'folder2'}, {idFolder: 3, folderName: 'folder3'}, {idFolder: 4, folderName: 'folder4'}],{page: 2, size: 2},{amount: 3}],
    superadmin: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}],
    user: [[{idFolder: 1, folderName: 'folder1'}],{page: 1, size: 2},{amount: 3}]
 }

但有了reducer，我看到了这种状态：

     folders: {
       admin: [[{idFolder: 3, folderName: 'folder3'}, {idFolder: 4, folderName: 'folder4'}],{page: 2, size: 2},{amount: 3}],
  
     }

我尝试在减速机中使用扩展运算符，但它不起作用。这是显而易见的，因为更改在进入文件夹对象的数组中

  export const sideBarReducer = createReducer(
   initialSidebarState,
   on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
      return {
               ...state,
               folders: {...state.folders, action.folders},
               selectedFirm : action.selectedFirm
      };
    }),
  );

---

对象展开仅执行浅合并。

---

您需要进行深度合并，例如，您可以使用我尝试过的

，但它不起作用。我有一个错误：无法分配只读属性“amount”，因为您的对象是只读的，所以您必须复制它。