Redux Reducer 的拆分（一）

Reducer 的拆分

写一个Reducer的例子

<script>

        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 = Redux.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() );
    </script>

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 ) => {
      users: [],
      articles: [],
      comments: []
}

这样改变会发现只是把原来的数据原封不动的返回了出去。第二部，我们把要处理的数据分别写成一个个函数，进行调用

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

}

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

const reducer = ( state, action ) => {
      users:users( state, action),
      articles: articles( state, action),
      comments:  comments( state, action)
}

 /*
        * 添加一个用户
        * */
        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'}
        });

拆分的思路大致就是这样的，代码量没有减少，但是模块清晰 了很多。这种拆分与 React 应用的结构相吻合：一个 React 根组件由很多子组件构成。