Unable to dispatch two actions within effect in rxjs

Question

I am dispatching two actions and no need to execute sequentially. I tried below code:

 @Effect()
   loadIntResponse$ = 
   this.actions.ofType(fromActions.LOAD_INT_RESPONSE).pipe(
   switchMap(() => {
     return this.Service.int().pipe(
    tap(x => this.store.dispatch(new fromActions.LoadService(x))),
    map(responseResult => {
     return new fromActions.LoadIntResponseSuccess(responseResult)
    }),
    catchError(error => {
      let err: responseResult = {
        status: "FALSE",
        message: error
      }
      return of(new fromActions.LoadIntResponseFail(err))
    })
  )
 })
)

loadService$ = this.actions.ofType(fromActions.Load_Service).pipe(
    switchMap((action: fromActions.LoadService) => {
    if (action.payload.status == 'TRUE' {
    return this.reuseService.reuseServiceCall().pipe(
    map( result ==> {
        return of({type: fromActions.LOAD_SERVICE_SUCCESS, payload: 
        result})
   }),
   catchError(error => {
      let err: responseResult = {
        status: "FALSE",
        message: error
      }
      return of(new fromActions.LoadServiceFail(err))
    })
  )
 })
)

But it is not triggering another effect LoadService()

Expected Result: Trigger another effect LoadService()

LoadService accept any type parameter.

I really appreciate for the help. Thank you!

What is this effect supposed to do? And the return in your catchError most likely wont work. — ukn
This effect suppose to call the service.int() which will return status and message. If success then LoadIntResponseSuccess with response result from service.int() and trigger another effect LoadService(x). x being response result as well from service call this.Service.int(). Otherwise, in the catch call fail action passing the response result, status as FALSE and error message in message. — CodeVenture
Ok, thats not how it works! Basically you want to dispatch new fromActions.LoadService(x) when fromActions.LoadIntResponseSuccess happens? — ukn

ukn ukn · Accepted Answer · 2020-06-24T17:38:38

I made some modification to match what you said you wanted in the comments. First you have an effect that calls int() then will dispatch a LoadIntResponseSuccess if successful but will go to the catchError if not. You have a second effect that listen to LoadIntResponseSuccess and will dispatch a LoadService as soon as LoadIntResponseSuccess is triggered.

I could be wrong with the second effect because I dont know how the format of the data passed with your action so x could be x.something

The loadService effect is now filtering the payload first. You cant have a if in a switchMap that allow you to return something or nothing, you have to have an else if you want an if! After the filtering, the service called is made and if its successful, LoadServiceSuccess is dispatched if not, it goes to the catchError.

 @Effect()
   loadIntResponse$ = 
   this.actions.ofType(fromActions.LOAD_INT_RESPONSE).pipe(
   switchMap(() => this.Service.int()),
   map((responseResult) => new fromActions.LoadIntResponseSuccess(responseResult)),
   catchError((error: any, effects: Observable<Action>) => {
      let err: responseResult = {
        status: "FALSE",
        message: error
      }
      return effect.pipe(startWith(new fromActions.LoadIntResponseFail(err)))
    })
  )

 @Effect()
   loadIntResponseSuccess$ = 
   this.actions.ofType(fromActions.LOAD_INT_RESPONSE_SUCCESS).pipe(
   map((action) => new fromActions.LoadService(action.payload))
  )



 @Effect()
    loadService$ = this.actions.ofType(fromActions.Load_Service).pipe(
       switchMap((action) => { if (action.payload.status === 'TRUE') {
         return [new fromActions.LoadServiceSuccess(action)]
        } else {
         return [new fromActions.LoadServiceFail()]
        } ),
         catchError((error: any, effects: Observable<Action>) => {
           let err: responseResult = {
             status: "FALSE",
             message: error
           }
           return effect.pipe(startWith(new 
             fromActions.LoadServiceFail(err)))
         })
       )

Unable to dispatch two actions within effect in rxjs

1 Answers