Question

我创建了一个ngrx effect，负责向后端发送POST请求。现在我想稍微改变一下实现。如果发布请求成功，我想触发另一个负责更新我的ngrx存储的操作。但是我不知道该怎么做。

我尝试使用开关图和合并图，但是没有用。

creatTour$ = createEffect(() =>
   this.actions$.pipe(
       ofType(TourAction.createTour),
        mergeMap((action) => {
            const payload = action.tour;
            const endpoint = environment.urls.tour.replace("{tourProviderId}", "1");
             const request = new ServiceRequest(endpoint, 'POST', payload, options);

             return this.requestHandlerService.invoke(request).pipe(
                map((sucessResponce) => {
                   if (sucessResponce.code === 200) {
                        TourListAction.updateTourList({ tour: [tour] }) // i want to trigger this action and
                                                                            // below action 
                     }
                   return TourAction.createTourSucess({ responce: sucessResponce.message })
                    }),
                    catchError(err => {
                        const errorMessage = JSON.stringify(err);
                        console.log(errorMessage);
                        return of(TourAction.createTourFail({ errorMessage }))
                    })
                )
            })
        )
    );

我也尝试过这种方式

return [TourAction.createTourSucess({ responce: sucessResponce.message }
        TourListAction.updateTourList({ tour: [tour] })]

它会引发此错误

 Property 'type' is missing in type '(({ responce: string; } 
 & TypedAction<"[Tour] Create Tour Success">) | ({ tour: Tours[]; } & 
 TypedAction<"[Tour List] Tour List Update">))[]' but required in type 
 'Action'.

这是执行此操作的更好方法。我看到有一个名为entity的新东西可以用于该实现吗？

Answer 1

为什么不通过createTourSucess操作来更新您的状态？

您还可以返回多个操作：

.pipe(
  switchMap(() => 
    return [
    TourListAction.updateTourList({ tour: [tour] }) ,  
    TourAction.createTourSucess({ responce: sucessResponce.message })
    ]
  )
)

https://medium.com/@amcdnl/dispatching-multiple-actions-from-ngrx-effects-c1447ceb6b22

Answer 2

您可以从效果中返回多个动作，所有动作都将被分派。

请参见https://medium.com/@tanya/understanding-ngrx-effects-and-the-action-stream-1a74996a0c1c 对于您的代码：

return successResponse.code === 200 ? [
    createTourUpdateAction(tour), 
    TourAction.createTourSuccess
    ] : [TourAction.createTourSuccess]

成功后触发一个动作，另一个动作ngrx的完全响应

2 个答案: