切换地图后在 NGRX 效果点击功能中获取动作道具

Question

我在 Angular 中有一个效果，它工作正常，但我希望在调用开关映射中的 API 之后获取要传递的动作道具变量。

效果如下

    updateCustomer$ = createEffect(() =>
    this.actions$.pipe(
        ofType(updateCustomer),
        switchMap(action =>
            this.customerService.updateCustomer(action.customer).pipe(
                map(response => {
                    return successLoad({ data: response });
                }),
                catchError(EMPTY)
            )
        ),
        tap((action) => {
            console.log(action); I want to get props that I passed in the switch map. I need the value of flag that I passed so I can do some other things based on the flag
            //Do something
        })
    )
    );

动作


export const updateCustomer = createAction(
    '[Component] Add Customer',
    props<{ customer: customer, flag:string}>()
);

我想获得我在切换地图中传递的道具。我需要我传递的标志值，这样我就可以根据 tap 运算符中的标志做一些其他事情。这可能吗？

Answer 1

这是可能的，但工作流程取决于你想用它做什么。你想在点击时发送另一个动作，还是只想做一些其他的事情？如果它仅用于其他内容，则将您的操作和 updateCustomer 响应映射到对象并在以下 map 运算符中处理它。这样你的效果仍然 return successLoad 动作并且你可以访问

updateCustomer$ = createEffect(() =>
  this.actions$.pipe(
  ofType(updateCustomer),
  switchMap(action =>
    this.customerService.updateCustomer(action.customer).pipe(
      map(response => ({ action, response })),
      catchError(EMPTY)
    )
  ),
  //filter(response => !!response) // might neeed to add a filter for EMPTY response, not sure if !! is enough
  map(({action, response}) => {
    console.log(action); // your first action is here for some magic
    return successLoad({ data: response }); // return new action with data from updateCustomer
  }),
  filter(action => !!action) // failsafe is `updateCustomer` fails
);

如果您想 return 多个操作，请将最后一个 map 替换为 switchMap 和 return 操作数组。

切换地图后在 NGRX 效果点击功能中获取动作道具

Get action props in the NGRX effects tap function after switch Map

ngrx

ngrx-effects

angular