📜  Redux-纯函数

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