redux reducer – Redux教程

上一章Redux教程请查看：redux纯函数

还原是Redux中的一个纯函数，纯函数是可预测的，还原是改变还原状态的唯一方法，这是你唯一可以写逻辑和计算的地方，reduce函数将接受app的前一个状态和正在调度的动作，计算下一个状态并返回新对象。

以下几件事不应该在Reducer内部执行

• 函数变元
• API调用和路由逻辑
• 调用非纯函数，如Math.random()

以下是Reducer的语法：

(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;

现在，你可以将这个rootReducer传递给createStore方法，如下所示

const store = createStore(rootReducer);