javascript - 使用ofType以@ngrx效果访问 Action Prop 以进行多个 Action

使用ofType运算符，我有2个动作和这2个动作的效果，如下所示：

export const myActions = {
  actionA: createAction(`actionA`, props<{ a: string }>()),
  actionB: createAction(`actionB`, props<{ b: number }>())
}

myEffect$ = createEffect(() =>
  this.actions$.pipe(
    ofType(myActions.actionA, myActions.actionB),
    mergeMap(action => {
      // How to convert action object to correct type and access action.a or action.b props?
      if (action.type == myActions.actionA) {
        console.log(action.a); // compile error
      } else if (action.type == myActions.actionB) {
        console.log(action.b); // compile error
      }
    })
  ), {dispatch: false}
);

如何通过IDE自动检查并访问动作道具（action.a和action.b）？

最佳答案

ofType将动作类型作为通用参数，例如ofType<Action>(actionType)，则合并映射参数将键入为Action，而无需键入。

在您的情况下，action参数也可以是ActionA或ActionB，因此您必须编写ofType<ActionA | ActionB>(actionTypeA, actionTypeB)，然后来自mergeMap的action将被键入为ActionA和ActionB的并集。但是在适当的if分支中，像(action.type == myActions.actionA)这样的分支只会被输入ActionA，因为TS编译器理解一些ifs语句。

@timdeschryver的BTW建议将其分为2个效果非常好。

=============编辑=================

如果要通过export const actionA = createAction('actionA', props<{ a: string }>())定义动作，则可以通过ActionA声明type ActionA = ReturnType<typeof actionA>;的类型。 ReturnType是通用添加到TypeScript的。