ReactJS/Redux-纯Javascript函数与不纯Javascript函数？

我已经阅读了ReactJs中纯Javascript函数和非纯Javascript函数的定义。

纯函数是不尝试更改其输入的函数，并且总是为相同的输入返回相同的结果

示例

function sum(a, b) {
  return a + b;
}

function withdraw(account, amount) {
  account.total -= amount;
}

不纯函数是一种改变自身输入的函数

示例

function sum(a, b) {
  return a + b;
}

function withdraw(account, amount) {
  account.total -= amount;
}

---

现在，有人能告诉我，在需要纯函数的React/Redux中，我怎么能错误地使函数不纯净呢？

您可以通过添加API调用或编写导致副作用的代码来使纯函数不纯净

纯函数应该始终是对的和自解释的，并且不应该要求您参考3或4个其他函数来理解发生了什么

//纯函数
功能USDtoEUR（美元，今日汇率）{
返回美元*今日汇率；
}
//不纯函数
功能USDtoEUR（美元）{
const todayRate=getTodayRate（）；
返回美元*今日汇率；
}

如果发生React/Redux

const-mapState=async-state=>{
const{data}=await whatdoined（）
设mappedState={}
if（data.needDolphin）{
mappedState.dolphin=state.dolphin
}
if（data.needShark）{
mappedState.shark=state.shark
}
返回映射状态；
}
//或用于Redux减速器
//坏的
{
setData：（状态，有效载荷）=>{
常量集=whatToSet（）
返回{
……国家，
set.dolphin？…{dolphin:payload.dolphin}:…{}，
set.shark？…{shark:payload.shark}:…{，
}
}
}
//好
{
setData：（状态，有效载荷）=>{
返回{
……国家，
//只送你需要的东西
//发送
…有效载荷
}
}
}

---

不应执行此操作。connect函数或reducer函数所需的一切都必须通过参数提供或写入其函数中。它永远不应该来自外界。

只是说这种状态不能变异。每次发生更改时都应返回状态的新实例，以便

此代码不正确：

const initialStates = {    
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {
        state.items.push(action.item)
        return state
    }
    default:
      return state
  }
}

这段代码在下面作为纯函数编写时，将返回数组的新实例，但不会修改实际数组本身。这就是您应该使用类似于库的方法来处理不变性的原因

const initialStates = { 
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {

        state = {...state,items:state.items.concat(action.item)}
        return state
    }
    default:
      return state
  }
}

---

React和

Redux

都需要纯函数和不变性，才能以可预测的方式运行

如果你不遵循这两个原则，你的应用程序就会出现错误，最常见的错误是

React/Redux

无法跟踪更改，并且在

状态/prop

更改时无法重新渲染

在反应方面，考虑下面的例子： 状态由仅添加了属性的状态对象持有。此应用程序呈现应用程序属性。它不应该总是在发生任何事情时呈现状态，而是应该检查状态对象中是否发生了更改

就像这样，我们有一个影响函数，一个纯粹的函数，我们用它来影响我们的状态。您可以看到，当状态要更改时，它会返回一个新状态，而当不需要修改时，它会返回相同的状态

我们还有一个

shouldUpdate

函数，它使用===运算符检查旧状态和新状态是否相同

要在反应方面出错，您实际上可以执行以下操作：

function effects(state,action) {

  doRandom(); // effects should only be called for updating state.
             // Doing any other stuff here would make effects impure.

    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}

您也可以通过直接设置状态而不使用

effects

功能来出错

function doMistake(newValue) {
    this.state = newValue
}

不应执行上述操作，只应使用

效果

功能来更新状态

在React方面，我们将

效果

称为

设置状态

对于Redux：

Redux的组合减速机实用程序检查引用更改

React-Redux的

connect

方法生成组件，检查根状态和

mapState

函数返回值的引用更改，以查看包装的组件是否确实需要重新渲染

时间旅行调试要求减速机是

纯功能

，没有任何副作用，以便您可以在不同的状态之间正确跳转

使用不纯函数作为约化子，很容易违反上述三点

以下内容直接取自redux文档：

它之所以称为reducer，是因为它是传递给

Array.prototype.reduce（reducer，？initialValue）

的函数类型。
减速机保持纯净是非常重要的。在减速器内不应执行的操作：

Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().

---

给定相同的参数，它应该计算下一个状态并返回它。没有意外。没有副作用。没有API调用。没有突变。只是计算。

不纯函数有副作用。类似于

window.getElementById

等，因此使用相同的参数运行相同的函数可能会产生不同的结果，具体取决于副作用。这就是redux失败的地方。