redux纯函数 – Redux教程

上一章Redux教程请查看：redux动作

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

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

让我们以一个函数为例，它返回作为函数输入传递的值的两倍。一般写成f(x) => x*2。如果用参数值2调用一个函数，那么输出将是4，f(2) => 4。

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

const double = x => x*2; // es6箭头函数
console.log(double(2));  // 4

这里，double是一个纯函数。

根据Redux中的三个原则，更改必须由一个纯函数完成，即， Redux中的reducer。现在，一个问题出现了，为什么一个reducer必须是一个纯函数。

假设，你希望通过单击add to cart按钮来分派一个类型为“ADD_TO_CART_SUCCESS”的操作，以便将一个项目添加到购物车应用程序中。

让我们假设reducer正在添加一个项目到你的购物车如下-

const initialState = {
    isAddedToCart: false;
 }
 const addToCartReducer = (state = initialState, action) => { //es6箭头函数
    switch (action.type) {
       case 'ADD_TO_CART_SUCCESS' :
          state.isAddedToCart = !state.isAddedToCart; // 原始对象改变
          return state;
       default:
          return state;
    }
 }
 export default addToCartReducer ;

让我们假设，isAddedToCart是状态对象上的一个属性，它允许你通过返回一个布尔值“true或false”来决定何时禁用“add to cart”按钮。这可以防止用户多次添加相同的产品。现在，我们不是返回一个新对象，而是像上面那样在状态上修改isAddedToCart prop。现在，如果我们试图添加一个项目到购物车，什么也不会发生。添加到购物车按钮将不会被禁用。

这种现象的原因是这样的：

Redux通过新旧对象的内存位置来比较新旧对象。如果发生了任何变化，它期望从reducer获得一个新对象。如果没有发生更改，它还希望取回旧对象。在本例中，它是相同的。由于这个原因，Redux假设什么都没有发生。

因此，在Redux中，reducer必须是一个纯函数。下面是一种没有突变的写法

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