Ngrx/data appears to interfere with reducers

Question

I'm fairly new to Ngrx so I'm assuming that I'm doing something wrong. It appears that if Ngrx/data is active then it interferes with the state history resulting in reducers being called with undefined initial states.

This is apparent if I have multiple states in the root. A reducer for one state affects the other state.

I created a small app to demonstrate the problem. I added EntityDataModule to my module file like this:

  imports: [
    BrowserModule,
    HttpClientModule,
    EntityDataModule.forRoot({ entityMetadata: { Hero: {} }, pluralNames: { Hero: 'Heroes' }}),
    BrowserAnimationsModule,
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],

Here is my store code:

import { ActionReducerMap, createAction, createReducer, createSelector, on, props } from '@ngrx/store';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';

export interface FirstState {
  value: string;
}

export interface SecondState {
  value: string;
}

export interface State {
  first: FirstState;
  second: SecondState;
}

const initialFirstState: FirstState = {
  value: 'firstValue'
};

const initialSecondState: SecondState = {
  value: 'secondValue'
};

export const selectFirstState = (state: State) => state.first;
export const selectSecondState = (state: State) => state.second;

export const selectFirstValue = createSelector(selectFirstState, (state: FirstState) => state.value);
export const selectSecondValue = createSelector(selectSecondState, (state: SecondState) => state.value);

export const indirectAction = createAction(
  '[Indirect] Use Effects',
);

export const firstValueSet = createAction(
  '[First] Set Value',
  props<{ theValue: string }>()
);

export const secondValueSet = createAction(
  '[Second] Set Value',
  props<{ theValue: string }>()
);

export const firstReducer = createReducer(
  initialFirstState,
  on(firstValueSet, (state, { theValue }) => ({ ...state, value: theValue }))
);

export const secondReducer = createReducer(
  initialSecondState,
  on(secondValueSet, (state, { theValue }) => ({ ...state, value: theValue }))
);

export const reducers: ActionReducerMap<State> = {
  first: firstReducer,
  second: secondReducer
};

@Injectable()
export class EffectService {
  constructor(private actions$: Actions) {}

  indirect$ = createEffect(() => this.actions$.pipe(
    ofType(indirectAction),
    map(action => secondValueSet({ theValue: 'INDIRECT' }))
  ));
}

I created a Stackblitz app here: https://stackblitz.com/edit/angular-bttdek

If you click any button, which just dispatches actions:

  setFirstValue() {
    this.store.dispatch(firstValueSet({ theValue: 'S1:' + Math.random() }));
  }

  setSecondValue() {
    this.store.dispatch(secondValueSet({ theValue: 'S2:' + Math.random() }));
  }

  indirect() {
    this.store.dispatch(indirectAction());
  }

You will see that the other state is reset to the initial state. If I remove EntityDataModule.forRoot() from the module, it works correctly. So it seems just having EntityDataModule active causes a problem in the store. I stepped through the store and found the index to the latest un-committed state is off-by-one resulting in the reducers being called with an undefined initial state.

With EntityDataModule active

If I remove EntityDataModule like this:

  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],

It works: With EntityDataModule disabled

Am I mis-configuring something?

timdeschryver timdeschryver · Accepted Answer · 2019-08-15T19:08:51

The store module must be loaded first, and this should resolve your issue:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    // ---
    StoreModule.forRoot(reducers),
    EntityDataModule.forRoot({ entityMetadata: { Hero: {} }, pluralNames: { Hero: 'Heroes' }}),
    // ---
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ngrx/data appears to interfere with reducers

1 Answers