NG2 with NGRX: action reduced twice

JavaScript
1

Hey there.

I’m developping an Angular2 app with the redux-like “NGRX” package.
In my AppComponent’s OnInit I subscribe to the store to watch it for changes to the “theme” property and dispatch my setThemeAction - works as expected so far.
There’s a side-effect (ngrx/effects) waiting for setThemeAction to occur that has a switchMap() to pass the theme ID to my ThemeService and depending on boolean result returns setThemeSuccessAction or setThemeFailureAction.

For testing purposes I added another setThemeAction call afterwards with setTimeout(), also works as expected, but is “fired” twice, my reducer handles the action twice as I can see in console plus the order of the action chain seems to get messed up.

The chain is / should be:

  • “if no theme”: setThemeAction with default theme
  • setThemeAction
  • SideEffect calls ThemeService once
  • setThemeSuccessAction
  • setTimeout(setThemeAction, 5000)
  • setThemeAction
  • SideEffect: call ThemeService.setTheme(action payload) (no HTTP required, using switchMap())
  • setTheme(Success | Failure)Action “dispatched” (returned) by the effect - finished

What I actually see is:

  • “if no theme”: setThemeAction with default theme
  • setThemeAction
  • SideEffect calls ThemeService once
  • setThemeSuccessAction
  • setTimeout(setThemeAction, 5000)
  • setThemeAction
  • SideEffect calls ThemeService once
  • setThemeSuccessAction
  • setThemeSuccessAction
  • setThemeAction

Do I have to unsubscribe anywhere after the first setThemeAction?
Already tried to add share() in several places but nothing changed :frowning:

I’ll try to extract the relevant parts of the code in the next few hours, also trying to setup a plunkr.
If anyone got an idea so far, please don’t hesitate to post it :slight_smile:

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.