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, {}),
]
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? 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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With