Redux教程：Reducers

Reducer是Redux中的纯函数。纯函数是可预测的。Reducer是更改Redux中状态的唯一方法。它是您唯一可以编写逻辑和计算的地方。Reducer函数将接受应用程序和操作的先前状态，计算下一个状态并返回新对象。

以下几件事永远不要在reducer内执行：

• 函数参数的突变
• API调用和路由逻辑
• 调用非纯函数，例如Math.random（）

以下是reducer的语法：

(state,action) => newState

让我们继续在动作创建者模块中讨论的在网页上显示产品列表的示例。下面让我们看看如何编写它的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会以未定义状态调用reducer。在此代码示例中，’ITEMS_REQUEST_SUCCESS’中使用了JavaScript的concat()函数，该函数不会更改现有数组；而是返回一个新数组。

这样，可以避免状态发生变化。永远不要直接写状态。在“ ITEMS_REQUEST”中，我们必须根据收到的动作设置状态值。

已经讨论过，我们可以在reducer中编写逻辑，并可以在逻辑数据的基础上对其进行拆分。让我们看看在处理大型应用程序时如何拆分化简器并将它们作为根化简器组合在一起。

假设我们要设计一个网页，用户可以在其中访问产品订单状态并查看愿望清单信息。我们可以将逻辑分离到不同的reducer文件中，并使它们独立工作。让我们假设调度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 CombineReducers实用程序来组合这两个reducer。CombineReducers生成一个函数，该函数返回一个值不同的reducer函数的对象。您可以将所有Reducer导入索引Reducer文件中，并将它们与具有各自名称的对象组合在一起。

/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);