📅  最后修改于: 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;