ngrx 从 effect 多次分派相同的动作

Question

我有一个相当简单的问题，但无法弄清楚我做错了什么 - 我在网上找到的解决方案似乎都不适合我：

在打开我的应用程序的某个部分时，会分派一个操作以从后端加载当前的 item-Id 列表。

检索到此列表后 - 我需要加载我刚刚获得 id 的所有项目。

( GET /api/items -> [1,2] -> GET /api/items/1, GET /api/items/2)

我试图用这样的效果来解决这个问题：

我选择了 mergeMap，因为我想发出一系列动作，但不关心它们的顺序。

这样做

@Effect() loadList$: Observable<LoadAction[]> = this.actions$.pipe(
    ofType<LoadListAction>(LOAD_LIST_ACTION),
    mergeMap( _ =>
      this.backendService.getItemIds().pipe(
        filter( it => it.items.length > 0),
        map(response => response.items.map(it => new LoadAction(it.id));
        )
      )
    )
  );

给我这个错误：

"invalid action was dispatched" [{"type":"[ITEMS][INIT] load item", "payload":"1"}, {"type":"[ITEMS][INIT] load item", "payload":"2"}],
 TypeError: Actions must have a type property

这是有道理的，因为 observable 现在直接发出数组，所以我切换到了两次 mergeMap：

@Effect() loadList$: Observable<LoadAction[]> = this.actions$.pipe(
    ofType<LoadListAction>(LOAD_LIST_ACTION),
    mergeMap( _ =>
      this.backendService.getItemIds().pipe(
        filter( it => it.items.length > 0),
        mergeMap(response => response.items.map(it => new LoadAction(it.id));
        )
      )
    )
  );

这里只有最后一个动作到达减速器(/api/items/2)，第一个动作消失并且永远不会生效。（我已验证，该列表的长度为 2）。

这里有什么问题？

Answer 1

确保两个操作的 Action.type 不同，在我的例子中，我不小心将两个不同操作的类型设置为相同。我很难调试它，但最终我找到了问题所在。