How to create local effect in ngrx/effects

Question

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

Michael Kang · Accepted Answer · 2017-06-15 14:16:04Z

2

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' });
      ];
   })

answered Jun 15, 2017 at 14:16

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YairTawil · Accepted Answer · 2017-06-15 11:18:39Z

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 :-)

You can do this: ` map(({payload}: user.SignUpSuccessAction) => //Use payload ) ` instead of map(toPayload)

Collectives™ on Stack Overflow

How to create local effect in ngrx/effects

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related