Ngrx - Weird Behavior on Effects

Question

As the title says, I ran into a problem when all my effects work correctly only in the following cases:

• I have already logged in
• I have not logged in

If I manage to log out and log in with another user, a problem arises. Only every ngOnInit that executes the action dispatcher is called. Effects do not work.

I have two modules: app.module and pages.module . The first declares only components for non-registered users, such as login / register / reset. The latter only declare components for the registered user.

In app.module.ts, I import all the reducers and set them as StoreModule.provideStore(reducer) . In page.module.ts , another module, I import and activate effects like EffectsModule.run(TestEffects) .

With the following code, only the log inside ngOnInit . The log inside the effect is never called.

test.component.ts

 /** ngrx **/ import * as reducers from '../../reducers'; import * as testActions from './actions/test.actions'; . . . constructor(private _store: Store<reducers.State>){ this._store.select(reducers.getStuff) .subscribe(stuff => console.log(stuff)); } ngOnInit() { console.log('Dispatching Load Action'); this._store.dispatch(new testActions.LoadAction()); } 

test.actions.ts

 import { Action } from '@ngrx/store'; export const ActionTypes = { LOAD: type('[Test] Load'), LOAD_SUCCESS: type('[Test] Load Success'), }; export class LoadAction implements Action { type = ActionTypes.LOAD; constructor() {} } export class LoadActionSuccess implements Action { type = ActionTypes.LOAD_SUCCESS; constructor(public payload: SomeType) {} } export type Actions = LoadAction | LoadActionSuccess 

test.effects.ts

 @Injectable() export class TestEffects { @Effect() load$ = this.actions$ .ofType(testActions.ActionTypes.LOAD) .map(toPayload) .switchMap(() => this._testService.getStuff() .map(result => new testActions.LoadActionSuccess(result)) .catch((error) => Observable.of({type: error})) ) ; constructor(private _testService: TestService, private actions$: Actions) {} } 

test.service.ts

 import { createSelector } from 'reselect'; import { Action } from '@ngrx/store'; /** ngrx **/ import * as sidebarActions from '../actions/test.actions'; export interface State { stuff: SomeType }; export const initialState: State = { stuff: new SomeType() }; export function testReducer(state = initialState, action: Action): State { switch (action.type) { case testActions.ActionTypes.LOAD_SUCCESS: return { stuff: new SomeType(action.payload) } default: { return state; } } } export const getStuff = (state: State) => state.stuff; 

In my package.json , I have:

 { "dependencies" : { "@angular/core": "^4.0.0", . . ., "@ngrx/core": "^1.2.0", "@ngrx/effects": "^2.0.4", "@ngrx/store": "^2.2.3", . . . }, "devDependencies" : { . . . "ngrx-store-freeze": "^0.1.9", . . . } } 

I really don't understand this behavior. I also took prey on ngrx github issues and related issues like this one , but I am not able to solve this problem.

I suppose this could be due to the fact that I have these two different modules

EDIT

Moving effects and their services inside app.module leads to the same behavior.

What am I doing wrong?

Answer 1

It turned out that the problem was caused by the old version of ngrx . I managed to upgrade everything to version 4.1.1 , following the migration guide and various instructions in README.