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

Question

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

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

实例

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

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

实例

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

Answer 1

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

纯函数应该始终是中肯的，不言自明的，不应该要求您参考3或4个其他函数来理解发生了什么。

// Pure Function
function USDtoEUR(USD, todayRate) {
  return USD * todayRate;
}

// Impure Function 
function USDtoEUR(USD) {
  const todayRate = getTodayRate();
  return USD * todayRate;
}

在React/Redux的情况下

const mapState = async state => {
  const { data } = await whatDoINeed()

  let mappedState = {}

  if (data.needDolphin) {
    mappedState.dolphin = state.dolphin
  }

  if (data.needShark) {
    mappedState.shark= state.shark
  }

  return mappedState;
}

// Or for Redux Reducer
// Bad
{
  setData: (state, payload) => {
   const set = whatToSet()
   return {
     ...state,
     set.dolphin ? ...{ dolphin: payload.dolphin } : ...{},
     set.shark ? ...{ shark : payload.shark } : ...{},
   }
  }
}

// Good
{
  setData: (state, payload) => {
   return {
     ...state,
     // Just send only the things need
     // to be sent
     ...payload
   }
  }
}

不应该这样做。连接函数或减速器函数所需的一切都必须通过参数或在其函数中写入来提供。它不应该从外面得到。

Answer 2

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

此代码不正确：

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
  }
}

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

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
  }
}

Answer 3

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

如果您不遵循这两件事情，您的应用程序将有错误，最常见的是React/Redux无法跟踪更改，并且无法在状态/prop更改时重新渲染。

let state = {
    add: 0,
}

function render() {
    //...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
    if(action == 'addTen') {
        return {...state, add: state.add + 10} 
    }
    return state;
}

function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}

state = effects(state, 'addTen')if(shouldUpdate(state)) {
    render();
}

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

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

我们还有一个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方面，我们将效果称为setState。

1. Redux的组合器实用程序检查引用更改。
2. React-Redux的link方法生成组件，这些组件检查根状态和来自mapState函数的返回值的引用更改，以查看包装的组件是否确实需要重新渲染。
3. 时间旅行调试要求减速器是纯功能的，没有副作用，这样你就可以正确地在不同的状态之间跳跃。

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

以下内容直接取自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调用。没有突变。只是计算一下。