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() );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)详解