Search code examples
ngrxngrx-storengrx-effects

@ngrx/effects dispatch action again

I'm new at ngrx/store and effects so I still don't understand the flow of a dispatched action :

  1. actions -> effect -> reducer -> store
  2. actions -> reducer -> effect -> reducer -> store

my problem is when I call store.select() I find that the action is dispatched two times and this is what I did for test :

Reducer function

switch (action.type) { 
  ...
  default: { 
    console.log('In reducer function'); 
    return state; 
  }
}

Effects class constructor

constructor( private action$: Actions ) { 
  console.log('in effect constructor'); 
}

and this what I get in the console 

In reducer function
in effect constructor
In reducer function
Solution

  • try to log in reducer not only a message but action.type then you could see that it has 2 different actions: store init and effects init.

    When you dispatch an action it goes first to effects, then it goes to a reducer and the reducer can update a related state.

    usually people dispatch a load action, it is handled in an effect, effect loads data and returns a success action with payload, then a reducer receives the success action and sets the payload to its state.