使用 ofType 访问 @ngrx 效果中的动作道具，用于多个动作

Question

我使用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}
);

如何检查和访问动作的道具（action.a 和 action.b）并从 IDE 自动完成？

Answer 1

ofType作为通用参数类型的动作，例如，ofType<Action>(actionType)然后合并映射参数将被输入为Action不输入。

在您的情况下，action参数可以是ActionAor ActionB，因此您必须编写ofType<ActionA | ActionB>(actionTypeA, actionTypeB)，然后actionfrom mergeMap 将被键入为 Union of ActionAand ActionB。但是在正确的 if 分支中，例如(action.type == myActions.actionA)action 只会被ActionA键入，因为 TS 编译器理解一些 ifs 语句。

顺便说一句，@timdeschryver 将其分成 2 个效果的建议非常好。

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

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