📅 最后修改于: 2020-10-20 04:55:13 🧑 作者: Mango
函数是一个过程，该过程接受称为参数的输入，并产生一些称为返回值的输出。如果遵循以下规则，则该函数称为纯函数-
对于相同的参数，函数将返回相同的结果。
其评估没有副作用，即，它不会更改输入数据。
没有局部和全局变量的突变。
它不像全局变量那样依赖于外部状态。
让我们以一个函数为例，该函数返回作为输入传递给该函数的值的两倍。通常，它写为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”的操作，以通过单击“添加到购物车”按钮将商品添加到购物车应用程序。
让我们假设reducer正在将商品添加到您的购物车中，如下所示-
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中，reducer必须是纯函数。以下是一种无需突变即可编写的方法-
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;