Search code examples
angulartypescriptreduxngrx-store

Reducer from ngrx/store does not fire


I am using combineReducers in a "@angular/core": "4.4.3" and "@ngrx/store": "4.0.3" project and I am having issues with the reducers not getting picked up after dispatching the actions.

It might just be my limited experience with ngrx/store

The project in its entirety can be seen here https://github.com/raduchiriac/workflow

app.module.ts

import { AppStore } from './app.store'

@NgModule({
  imports: [
    StoreModule.forRoot(AppStore),
    ...
  ],
  providers: [
    ...
  ]
})

app.store.ts

import { createSelector } from 'reselect';
import * as ModalsReducer from "./store/reducers/modals.reducer";

export interface AppState {
  modals: ModalsReducer.State,
}

const metaReducer: ActionReducer<AppState> = combineReducers({
  modals: ModalsReducer.reducer,
});

export function AppStore(state: any, action: any) {
  return metaReducer(state, action);
}

modals.reducer.ts

import * as ModalsActions from '../actions/modals.actions';

export interface State {
  triggerAdd: boolean;
}

const initialState: State = {
  triggerAdd: false,
};

export function reducer(state = initialState, { type, payload }): State {
  switch (type) {
    case ModalsActions.MODALS_TRIGGER_ADD_CLOSE : {
      return Object.assign({...state}, {
        triggerAdd: false
      });
    }
    ...
}

triggers.component.ts

addNew() {
  this.store.dispatch(new ModalsActions.OpenTriggerAddAction());
}
...

EDIT: The only way the store will work is by doing this. Why?

app.module.ts

import { AppStore, reducers } from './app.store'
...
imports: [
  StoreModule.forRoot(reducers, {}),
]

Solution

  • Looks like you should take a look at the migration guide for ngrx v4.

    v4 changed how you register you reducers.

    StoreModule.forRoot(reducers, {}) works because StoreModule.forRoot expects an object of type ActionReducerMap<T, V>. The 2nd argument: {} - is the initial state.