Redux Reducer 的拆分

写一个Reducer的例子

import React from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';
import { createStore } from 'redux';  
import { Provider, connect } from 'react-redux';  
var data = {
    users: [],
    articles: [],
    comments: []
};

const reducer = ( state, action ) => {
    switch(action.type) {
    //添加用户
        case 'ADD_USER':
            return Object.assign({}, state, {users: [action.data, ...state.users]});
   //添加文章
        case 'ADD_ARTICLE':
            return Object.assign({}, state, {articles: [action.data, ...state.articles]});
   //删除文章
        case 'EDIT_ARTICLE':
            return Object.assign({}, state, {articles: state.articles.map( article => {
                if (article.id == action.data.id) {
                    article.title = action.data.title;
                }
                return article;
            } )});

        default:
            return state;
    }

};

const store = createStore( reducer , data );

console.log( store.getState() );


/*
* 添加一个用户
* */
store.dispatch({
    type: 'ADD_USER',
    data: {id: 1, username: '小李'}
});
store.dispatch({
    type: 'ADD_USER',
    data: {id: 2, username: '小红'}
});

console.log( store.getState() );

//添加文章
store.dispatch({
    type: 'ADD_ARTICLE',
    data: {id: 1, title: '这是第一篇文章'}
});
store.dispatch({
    type: 'ADD_ARTICLE',
    data: {id: 2, title: '这是第二篇文章'}
});

console.log( store.getState() );
//删除文章
store.dispatch({
    type: 'EDIT_ARTICLE',
    data: {id: 2, title: 'redux'}
});
console.log( store.getState() );

Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。 

data中包含用户的信息users，文章的信息articles，和评论的信息comments， 我们可以把他们拆分开来。一个js文件中只用来处理一个数据信息。不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可。

开始拆分：

const reducer = ( state, action ) => {} 这个函数必须return一个数据出来。那么我们可以把他改成下面这样的

var data = {
	users: [],
	articles: [],
	comments: []
};
const reducer = ( state, action ) => {
	return {
		users:[],
		articles:[],
		comments:[],
	}
}

这样改变会发现只是把原来的数据原封不动的返回了出去。

第二部，我们把要处理的数据分别写成一个个函数

//添加用户
function users( users, action){
	switch(action.type) {
	//添加用户
		case 'ADD_USER':
	     	return [action.data,...users];
	 	default:
	     	return users;     
	}

}
//文章列表
function articles( articles, action){
   switch(action.type){
        //添加文章
        case 'ADD_ARTICLE':
            return [action.data,...articles];
  		 //删除文章
        case 'EDIT_ARTICLE':
            return articles.map( article=> {
                if (article.id == action.data.id) {
                    article.title = action.data.title;
                }
                return article;
            })
       default:
             return articles;      
   }
}
//添加评论
function comments( comments, action){
    switch(action.type){
        default:
            return comments;  
    }
}

第三部调用，重新修改reducer函数

//这里传数据的时候没有必要把整个state传进去，我们用到什么传什么,改成如下代码：
const reducer = ( state, action ) => {
	return {
		users:users( state.users, action),
		articles:articles(state.articles,action),
		comments:comments( state.comments, action)
	}
}

const store = createStore( reducer , data );
console.log( store.getState());

上面代码中，Reducer 函数被拆成了三个小函数，每一个负责生成对应的属性。这样一拆，Reducer 就易读易写多了。

最后的整体代码：

import React from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';
import { createStore } from 'redux';  
import { Provider, connect } from 'react-redux';  
var data = {
    users: [],
    articles: [],
    comments: []
};
//添加用户
function users( users, action){
	switch(action.type) {
	//添加用户
		case 'ADD_USER':
	     	return [action.data,...users];
	 	default:
	     	return users;     
	}

}
//文章列表
function articles( articles, action){
   switch(action.type){
        //添加文章
        case 'ADD_ARTICLE':
            return [action.data,...articles];
  		 //删除文章
        case 'EDIT_ARTICLE':
            return articles.map( article=> {
                if (article.id == action.data.id) {
                    article.title = action.data.title;
                }
                return article;
            })
       default:
             return articles;      
   }
}
//添加评论
function comments( comments, action){
    switch(action.type){
        default:
            return comments;  
    }
}

//这里传数据的时候没有必要把整个state传进去，我们用到什么传什么,改成如下代码：
const reducer = ( state, action ) => {
	return {
		users:users( state.users, action),
		articles:articles(state.articles,action),
		comments:comments( state.comments, action)
	}
}

const store = createStore( reducer , data );
console.log( store.getState());
/*
* 添加一个用户
* */
store.dispatch({
    type: 'ADD_USER',
    data: {id: 1, username: '小李'}
});
store.dispatch({
    type: 'ADD_USER',
    data: {id: 2, username: '小红'}
});

console.log( store.getState() );


store.dispatch({
    type: 'ADD_ARTICLE',
    data: {id: 1, title: '这是第一篇文章'}
});
store.dispatch({
    type: 'ADD_ARTICLE',
    data: {id: 2, title: '这是第二篇文章'}
});

console.log( store.getState() );

store.dispatch({
    type: 'EDIT_ARTICLE',
    data: {id: 2, title: 'redux'}
});
 
console.log( store.getState() );

注意：

这样一拆，Reducer 就易读易写多了。而且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由很多子组件构成。这就是说，子组件与子 Reducer 完全可以对应。

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

参考：Redux之combineReducers(reducers)详解