Redux Reducer 的拆分

悠悠 2021-09-15 12:36 270阅读 0赞

写一个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)详解][Redux_combineReducers_reducers]

[Redux_combineReducers_reducers]: https://blog.csdn.net/woshizisezise/article/details/51142968