Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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, {}),
]
like image 752
Radu Chiriac Avatar asked Sep 25 '17 16:09

Radu Chiriac


People also ask

What does reducer do in NgRx?

Reducers in NgRx are responsible for handling transitions from one state to the next state in your application. Reducer functions handle these transitions by determining which actions to handle based on the type.

When should you not use NgRx?

When should you not use NgRx? Never use NgRx if your application is a small one with just a couple of domains or if you want to deliver something quickly. It comes with a lot of boilerplate code, so in some scenarios it will make your coding more difficult.

Is NgRx same as Redux?

NgRx uses the Redux concept of unidirectional data flow, where all application data goes through the same lifecycle. This unidirectional data flow makes the application's state more predictable and thus easier to understand.

How do I debug NgRx effects?

After installing the extension, you now should have the Ngrx DevTools available under the "Redux" menu option of your browser development tools (open them with Ctrl+Shift+I in Chrome). After opening the Ngrx DevTools, you will have to reload the application in order to start debugging the application.


1 Answers

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.

like image 118
amu Avatar answered Sep 23 '22 22:09

amu