Javascript React Redux，我是不是在改变状态？

我正在玩一个简单的React Redux应用程序，每次单击按钮时都会增加一个计数器。我正在测试在Redux Reducer中增加计数器的两种不同方法。这两种方法都在更改减速器中的状态，但是其中一种方法不会导致计数器重新启动

以下是将导致页面重新加载的减速器：

const reducer = (state={speed: 0}, action) => {

  if(action.type ==='INCREMENT_SPEED'){
    state = {...state, speed: state.speed+=1 
    }
    return state 
}

下面是一些代码，这些代码可以正常工作，但不会导致页面以正确的值重新加载

const reducer = (state={speed: 0}, action) => {

      if(action.type ==='INCREMENT_SPEED'){
        state.speed++ 
    }
    return state 
}

唯一的区别是我更新状态的方式。我的猜测是，使用++递增器实际上是在改变状态，而这种状态不被视为更改，因此不会导致页面呈现

如果有帮助，下面是附加到DOM的代码部分：

render() {
    return (
      <div>

        <p>SPEED: {this.props.reduxState.reducer.speed}</p>

      </div>
    )
  }
}

render（）{
返回(
速度：{this.props.reduxState.reducer.SPEED}

)
}
}

是，您正在改变原始状态，而不是返回计数器递增的新状态对象

您可以这样做（在这种情况下没有多大意义，但显示了问题）

---

这样，它是一个新对象，所以旧状态对象保持不变

您的假设是正确的。在第二个示例中，您正在改变状态，这不会触发重新渲染。你永远不应该改变国家。始终复制状态并返回新状态。

如果您签出，您会发现他们建议使用或来防止状态发生变化

这两种解决方案都是可行的

另一方面，减速机使用开关语句

使用Object.assign（）

使用对象扩展语法

const reducer = (state={speed: 0}, action) => {
  switch (action.type) {
    case 'INCREMENT_SPEED':
      return {...state, speed: state.speed + 1}
    default:
      return state
  }
}

---

您必须返回新对象而不是变异的旧对象才能触发重新排序。

const reducer = (state={speed: 0}, action) => {
  switch (action.type) {
    case 'INCREMENT_SPEED':
      return Object.assign({}, state, {
        speed: state.speed + 1
      })
    default:
      return state
  }
}

const reducer = (state={speed: 0}, action) => {
  switch (action.type) {
    case 'INCREMENT_SPEED':
      return {...state, speed: state.speed + 1}
    default:
      return state
  }
}