Question

我有这种效果

loadFirms$ = createEffect(() => {
    return this.actions$
    .pipe(
        ofType(SidebarAction.loadFirmList),
        switchMap((action) =>

          this.sidebarService.getFirms(action.userId).pipe(
           map(firmList => {
               let firms: Firm[] = [];
               Object.keys(firmList).map(value => {
                 let keyArray = value.replace('[', '').replace(']', '').split(', ');

                 firms.push({
                   id: parseInt(keyArray[0]),
                   firmName: keyArray[1],
                   roles: firmList[value]
                 });

          });

          return SidebarAction.loadFirmSuccess({firms});
        }),
      )
    )
    );
});

在loadFirmList动作（有一个userId有效负载用作参数）上，我想执行一个“ getFirms” GET请求，编辑相关响应（我将一个对象编辑成一个对象数组），然后将此新数组像有效负载一样传递给loadFirmSuccess。这可以正常工作，但是我还需要使用属性到“ firms”数组中进行另一个http get调用。我认为最好的方法是调度另一个这样的动作：

loadFirms$ = createEffect(() => {
    return this.actions$
    .pipe(
        ofType(SidebarAction.loadFirmList),
        switchMap((action) =>

          this.sidebarService.getFirms(action.userId).pipe(
           map(firmList => {
               let firms: Firm[] = [];
               Object.keys(firmList).map(value => {
                 let keyArray = value.replace('[', '').replace(']', '').split(', ');

                 firms.push({
                   id: parseInt(keyArray[0]),
                   firmName: keyArray[1],
                   roles: firmList[value]
                 });

          });

          return [SidebarAction.loadFirmSuccess({firms}),SidebarAction.loadDocuments({firms}) ];
        }),
      )
    )
    );
});

在分派loadDocuments时，我将调用另一个http get服务：“ loadDocuments”。最好的方法是什么？

Answer 1

您可以执行以下操作从一个效果中分派多个动作：

switchMap((action) =>
  this.sidebarService.getFirms(action.userId).pipe(
    map(firmList => {
      let firms: Firm[] = [];
      Object.keys(firmList).map(value => {
        let keyArray = value.replace('[', '').replace(']', '').split(', ');

        firms.push({
          id: parseInt(keyArray[0]),
          firmName: keyArray[1],
          roles: firmList[value]
        });
      });
      return firms;
    })
  )
),

// time to dispatch multiple actions
switchMap((firms) => [
  new SidebarAction.loadFirmSuccess({firms}),
  new SidebarAction.loadDocuments({firms})
])

Answer 2

移动此行：

return [SidebarAction.loadFirmSuccess({firms}),SidebarAction.loadDocuments({firms}) ];

在getFirms地图处理程序内：

loadFirms$ = createEffect(() => {
    return this.actions$
    .pipe(
        ofType(SidebarAction.loadFirmList),
        switchMap((action) =>

          this.sidebarService.getFirms(action.userId).pipe(
           map(firmList => {
               let firms: Firm[] = [];
               Object.keys(firmList).map(value => {
                 let keyArray = value.replace('[', '').replace(']', '').split(', ');

                 firms.push({
                   id: parseInt(keyArray[0]),
                   firmName: keyArray[1],
                   roles: firmList[value]
                 });
              return [SidebarAction.loadFirmSuccess({firmList}),SidebarAction.loadDocuments({firmList}) ];
          });


        }),
      )
    )
    );
});

您的内部可观察对象可以映射到动作数组，或者可以映射到动作的数组。在这种情况下，您将映射到一系列动作。

如何在ngrx中分派多个动作

2 个答案: