CODEWITHSUNDEEP
angulartypescriptngrxngrx-effectsngrx-store
E. Efimov
E. Efimov

Reputation: 463

How to create local effect in ngrx/effects

How can I do something like that in ngrx/effects:

// I want to handle a sign up effect
return this.actions$.ofType(user.SIGN_UP_SUCCESS)
   .map((action: user.SignUpSuccessAction) => action.payload)
   .mergeMap(() => {
      // then I have to call two other async actions to add new records
      return [
         new userOptions.Add(new UserOptionsModel());
         new userInfo.Add(new UserInfoModel());
      ];
   })

How can I handle success actions for both userOptions and userInfo actions and then redirect to a Dashboard page? I don't want to redirect to the Dashboard page if I dispatch userOptions.Add and userInfo.Add actions outside user.SIGN_UP_SUCCESS sequence, from other pages for example.

ANSWER

Victor Savkin. State Management Patterns and Best Practices with NgRx https://www.youtube.com/watch?v=vX2vG0o-rpM

Upvotes: 0

Views: 421

Answers (2)

Michael Kang
Michael Kang

Reputation: 52847

You can use @ngrx/router-store:

return this.actions$.ofType(user.SIGN_UP_SUCCESS)
   .mergeMap(() => {
      // then I have to call two other async actions to add new records
      return [
         new userOptions.Add(new UserOptionsModel()),
         new userInfo.Add(new UserInfoModel()),
         go(['/path', { routeParam: 1 }], { query: 'string' });
      ];
   })

Upvotes: 2

YairTawil
YairTawil

Reputation: 4101

2 options:

first: 

return this.actions$.ofType(user.SIGN_UP_SUCCESS)
   .mergeMap(() => {
      // then I have to call two other async actions to add new records
      return [
         new userOptions.Add(new UserOptionsModel());
         new userInfo.Add(new UserInfoModel());
      ];
   })
   .map((action) => {
      if(action instanceof UserInfoModel){
        /// latest
      }
   })

second:

you can use map twice instead of mergeMap.

return this.actions$.ofType(user.SIGN_UP_SUCCESS)
       .map(toPayload)
       .map(() => {
          return new userOptions.Add(new UserOptionsModel());                 
       })
       .map(() => {
             return new userInfo.Add(new UserInfoModel());
       })
       .map(() => {
             //the end
       })

**** map(toPayload) do this: map((action: user.SignUpSuccessAction) => action.payload)

import { toPayload } from '@ngrx/effects'

have a nice day :-)

Upvotes: 0

Related Questions