综合技术

Redux weird thing 1 – combineReducers

微信扫一扫,分享到朋友圈

Redux weird thing 1 – combineReducers
0

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

阅读原文...


微信扫一扫,分享到朋友圈

Redux weird thing 1 – combineReducers
0

Avatar

当点击浏览器后退时会发生什么

上一篇

One of Amazon's best e-readers, the Kindle Voyage, is $50 off today

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Redux weird thing 1 – combineReducers

长按储存图像,分享给朋友