redux纯函数 – 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教程】根据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;