title: Correctly mapping in effect of ngrx by calling multiple services and actions
body: <p>I have multiple effects and trying to combine it in one since there is an issue when dispatching the actions separately. I am trying to execute sequentially after checking the value returned from 1st service call. I have below three separate effects:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Effect()
  loadNqInclDResponse$ = 
    this.actions.ofType(fromActions.LOAD_NQINCLD_RESPONSE).pipe(
      switchMap(() =&gt; {
        return this.cinReuseService.WmsInCl().pipe(
          map(responseNqinclD =&gt; new 
            fromActions.LoadNqInclDResponseSuccess(responseNqinclD)),
          catchError(error =&gt; {
            const err: responseNqinclD = {
              httpStatus: "FALSE",
              message: "ERROR"
            };
            return of(new fromActions.LoadNqInclDResponseFail(err));
          })
        );  
      })
    );
  
  
  @Effect()
  loadCinReuseService$ = 
    this.actions.ofType(fromActions.LOAD_CIN_REUSE_SERVICE).pipe(
      switchMap(() =&gt; {
        return this.cinReuseService.cinReuseServiceCall().pipe(
          map(responseReuseService =&gt; new 
            fromActions.LoadCinReuseServiceSuccess(responseReuseService)),
          catchError(error =&gt; {
            const err: responseReuseService = {
              status: "FALSE",
              message: "ERROR"
            }
            return of(new fromActions.LoadCinReuseServiceFail(err))
          })
        );
      })
    )
  
  @Effect()
  loadCaseReuseService$ = 
    this.actions.ofType(fromActions.LOAD_CASE_REUSE_SERVICE).pipe(
      switchMap(() =&gt; {
        return this.cinReuseService.caseReuseServiceCall().pipe(
          map(responseReuseService =&gt; new fromActions.LoadCaseReuseServiceSuccess(responseReuseService)),
          catchError(error =&gt; {
            const err: responseReuseService = {
              status: "FALSE",
              message: "ERROR"
            };
  
            return of(new fromActions.LoadCaseReuseFail(err));
          });
        )
      });
  
  );
  </code></pre>
  
  <p>I expected single effect to be as below:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Effect()
  loadNqInclDResponse1$ = 
    this.actions.ofType(fromActions.LOAD_NQINCLD_RESPONSE).pipe(
      switchMap(() =&gt; {
        return this.cinReuseService.WmsInCl().pipe(
          map(nqinclD =&gt; {        
            // new fromActions.LoadNqInclDResponseSuccess(nqinclD);
            if (nqinclD.httpStatus === '200') {
              switchMap(() =&gt; {
                return this.cinReuseService.cinReuseServiceCall().pipe(
                  map(cin =&gt; new fromActions.LoadCinReuseServiceSuccess(cin)));
              }),
              switchMap(() =&gt; {
                return this.cinReuseService.caseReuseServiceCall().pipe(
                  map(cse =&gt; new fromActions.LoadCaseReuseServiceSuccess(cse)));
              })
            }
          }),
          catchError(error =&gt; {
            let err: responseNqinclD = {
              httpStatus: "FALSE",
              message: "ERROR"
            };
            return of(new fromActions.LoadNqInclDResponseFail(err))
          })
        )
      })
    )
  }
  </code></pre>
  
  <p>On a button click, I am receiving error as below when dispatching <strong>fromActions.LOAD_CIN_REUSE_SERVICE</strong>:</p>
  
  <p><strong>Error:</strong> Effect "CinReuseEffect.loadNqInclDResponse1$" dispatched an invalid action: undefined</p>
  
  <p><strong>TypeError:</strong> Actions must be objects</p>
  
  <p>Service call wmsInCl() has below code for testing purpose at the moment:</p>
  
  <pre><code>WmsInCl(): Observable&lt;responseNqinclD&gt; {
    var body: Body;
    var response: responseNqinclD;
    console.log("1111111" + body);
     response = {
      httpStatus: "200",
      message: "SUCCESS"
    }
    console.log(response);
    return of(response);
   }
  }
  </code></pre>
  
  <p>Thank you in advance!</p>