Redux weird thing 1 – combineReducers

综合技术 2018-06-18 阅读原文

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.counter.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 'counterChange':
	        let amount = action.amount ? action.amount: 0;
	        return {
	            ...state,	            
	            value: state.counter.value + amount
	            
	        };
	
	    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);

责编内容by:chenjianjx 【阅读原文】。感谢您的支持!