If your root component has more than one child component, you will have a big state , so is your reducer
// the initial state
const initialState = {
counter: {
value: 0
},
toDo: {
itemList: [
{id: 1, text: "be born", completed: true},
{id: 2, text: "get married", completed: true},
{id: 3, text: "have a baby", completed: false}
]
}
};
function reducer(state=initialState, action){
switch(action.type){
case 'counterChange':
let amount = action.amount ? action.amount: 0;
return {
...state,
counter: {
value: state.counter.value + amount
}
};
case 'toDoItemStatusChange':
return {
...state,
toDo:{
itemList: state.toDo.itemList.map(item => {
if(item.id == action.id){
return {
...item,
completed: action.completed
}
}else{
return item;
}
})
}
};
case 'toDoNewItem':
return {
...state,
toDo:{
itemList: state.toDo.itemList.concat({
id: Math.max.apply(null, state.toDo.itemList.map(item => item.id)) + 1,
text: action.text,
completed: false
})
}
};
default:
return state;
}
}
const rootStore = createStore(reducer);
Not only the things are big, but also the paths are deep.
The solution is to divide the big things in the code, but combine them during runtime. See below.
function counterReducer(state={value:0}, action){
switch(action.type){
case 'counterChange':
let amount = action.amount ? action.amount: 0;
return {
...state,
value: state.value + amount
};
default:
return state;
}
}
const initialToDoState = {
itemList: [
{id: 1, text: "be born", completed: true},
{id: 2, text: "get married", completed: true},
{id: 3, text: "have a baby", completed: false}
]
};
function toDoReducer(state=initialToDoState, action){
switch(action.type){
case 'toDoItemStatusChange':
return {
...state,
itemList: state.itemList.map(item => {
if(item.id == action.id){
return {
...item,
completed: action.completed
}
}else{
return item;
}
})
};
case 'toDoNewItem':
return {
...state,
itemList: state.itemList.concat({
id: Math.max.apply(null, state.itemList.map(item => item.id)) + 1,
text: action.text,
completed: false
})
};
default:
return state;
}
}
const reducer = combineReducers({
counter: counterReducer,
toDo: toDoReducer
});
const rootStore = createStore(reducer);