Chen Jian's Java Blog 

Redux weird thing 1 - combineReducers

by Chen Jian


Posted on 2018-06-18 20:46 in Frontend


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);



No one has commented yet.
该日志评论功能被禁用了。