Redux - Combined Reducers

Combined Reducers

• is nothing more than pulling in more than one reducer from source and creating a keyed object from them. `import todoReducer from './todo.store.js'; import itemReducer from './item.store.js';

let reducers = combineReducers({ todo: todoReducer, item: itemReducer, }); import * as actions from "../../store/todo.store.js"; import * as itemActions from "../../store/item.store.js";

const mapStateToProps = state => ({ todo: state.todo, item: state.item, });

const mapDispatchToProps = (dispatch, getState) => ({ deleteItem: id => dispatch(actions.deleteItem(id)), hideDetails: id => dispatch(itemActions.hideDetails()), `

What about the actions?

• Each reducer technically has it’s own actions and creators.
• However, they can cross over and both be dispatched.
• In this example, if an action of type ‘RESET’ is ever dispatched by any action creator, both of the reducers would actually respond.
• This can be` very powerful, as often times actions are valid for multiple reducers
• … but this behavior needs to be well understood or it’ll cause unintended consequences.