Redux教程：函数

函数是一个过程，该过程接受称为参数的输入，并产生一些称为返回值的输出。如果遵守以下规则，则该函数称为纯函数：

• 对于相同的参数，函数将返回相同的结果。
• 它的评估没有副作用，即，它不会更改输入数据。
• 没有局部和全局变量的突变。
• 它不像全局变量那样依赖于外部状态。

让我们以一个函数为例，该函数返回作为输入传递给该函数的值的两倍。通常，它写为f(x)=> x * 2。如果使用参数值2调用函数，则输出将为4，f(2)=> 4。

让我们用JavaScript编写函数的定义，如下所示：

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

在这里，double是一个纯函数。

根据Redux中的三个原则，必须通过纯函数（即Redux中的reducer）进行更改。现在，出现了一个问题，即为什么减速器必须是纯函数。

假设您要调度一个类型为“ ADD_TO_CART_SUCCESS”的操作，以通过单击“添加到购物车”按钮将商品添加到购物车应用程序。

让我们假设减速器将商品添加到您的购物车中，如下所示：

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

让我们假设，iwegoToCart是状态对象上的一个属性，通过返回布尔值“ true或false”，您可以决定何时禁用该项目的“添加到购物车”按钮。这样可以防止用户多次添加相同的产品。现在，我们不再返回新对象，而是在上述状态下对iwegoToCart道具进行了变异。现在，如果我们尝试将商品添加到购物车，则什么也不会发生。添加到购物车按钮将不会被禁用。

此行为的原因如下：

Redux通过两个对象的存储位置比较旧对象和新对象。如果发生任何更改，它期望来自减速器的新对象。而且，如果没有发生任何更改，它还希望将旧对象取回。在这种情况下，是相同的。由于这个原因，Redux假设没有任何反应。

因此，在Redux中，reduce必须成为纯函数。以下是一种无需突变即可编写的方法：

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;