上一章Redux教程请查看：redux纯函数
还原是Redux中的一个纯函数，纯函数是可预测的，还原是改变还原状态的唯一方法，这是你唯一可以写逻辑和计算的地方，reduce函数将接受app的前一个状态和正在调度的动作，计算下一个状态并返回新对象。
以下几件事不应该在Reducer内部执行
- 函数变元
- API调用和路由逻辑
- 调用非纯函数，如Math.random()
(state,action) => newState让我们继续在web页面上显示产品项列表的示例，该示例在action creator模块中讨论。让我们看看下面如何写Reducer：
const initialState = {
isLoading: false,
items: []
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ITEMS_REQUEST':
return Object.assign({}, state, {
isLoading: action.payload.isLoading
})
case ‘ITEMS_REQUEST_SUCCESS':
return Object.assign({}, state, {
items: state.items.concat(action.items),
isLoading: action.isLoading
})
default:
return state;
}
}
export default reducer;
首先，如果你没有设置状态为“initialState”，Redux会调用未定义状态的reduce。在这个代码示例中，在’ ITEMS_REQUEST_SUCCESS’ 中使用了JavaScript的concat()函数，它不会更改现有的数组; 而是返回一个新数组。
这样，就可以避免状态的突变，在“ITEMS_REQUEST”中，我们必须从接收的动作中设置状态值。
我们已经讨论过，我们可以把逻辑写在Reducer，并可以分割它的逻辑数据基础。让我们看看如何在处理大型应用程序时拆分Reducer并将它们作为根Reducer组合在一起。
假设我们要设计一个web页面，用户可以在其中访问产品订单状态并查看愿望列表信息。我们可以将逻辑分离到不同的reduce文件中，使它们独立工作。让我们假设GET_ORDER_STATUS动作被分派来获取与某个订单id和用户id对应的订单状态。
/reducer/orderStatusReducer.js
import { GET_ORDER_STATUS } from ‘../constants/appConstant’;
export default function (state = {} , action) {
switch(action.type) {
case GET_ORDER_STATUS:
return { ...state, orderStatusData: action.payload.orderStatus };
default:
return state;
}
}
类似地，假设分派GET_WISHLIST_ITEMS动作来获取用户各自的愿望列表信息。
/reducer/getWishlistDataReducer.js
import { GET_WISHLIST_ITEMS } from ‘../constants/appConstant’;
export default function (state = {}, action) {
switch(action.type) {
case GET_WISHLIST_ITEMS:
return { ...state, wishlistData: action.payload.wishlistData };
default:
return state;
}
}
现在，我们可以结合这两个还原剂使用Redux联合诱导器的效用。该组合器生成一个函数，该函数返回一个对象，该对象的值是不同的Reducer函数。你可以导入index reduce文件中的所有还原器，并将它们作为一个对象与它们各自的名称组合在一起。
/reducer/index.js
import { combineReducers } from ‘redux’;
import OrderStatusReducer from ‘./orderStatusReducer’;
import GetWishlistDataReducer from ‘./getWishlistDataReducer’;
const rootReducer = combineReducers ({
orderStatusReducer: OrderStatusReducer,
getWishlistDataReducer: GetWishlistDataReducer
});
export default rootReducer;
【redux reducer – Redux教程】现在，你可以将这个rootReducer传递给createStore方法，如下所示
const store = createStore(rootReducer);
推荐阅读
- redux纯函数 – Redux教程
- redux动作介绍 – Redux教程
- redux存储 – Redux教程
- redux核心概念和数据流 – Redux教程
- redux介绍和安装 – Redux教程
- 软件维护概述 – 软件工程教程
- 软件测试概述 – 软件工程教程
- 软件实现 – 软件工程教程
- 进阶（技术面试中的5大常见错误）