React Redux，我在這里改變狀態嗎？

Question

我正在玩一個簡單的React Redux應用程序，該應用程序每次單擊按鈕都會增加一個計數器。 我正在測試在Redux Reducer中增加計數器的兩種不同方法。 兩種方法都改變了reducer的狀態，但是其中一種方法沒有使我的計數器重新呈現。

這是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>
    )
  }
}

Answer 1

你的假設是正確的。 在第二個示例中，您正在更改狀態，並且不會觸發重新渲染。 您永遠不要改變狀態。 始終復制狀態並返回新狀態。

Answer 2

是的，您是在更改原始狀態，而不是使用遞增的計數器返回新的狀態對象。

您可以那樣做（在這種情況下，意義不大，但顯示出了問題）

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

  if (action.type ==='INCREMENT_SPEED'){
    state = {...state} // copy the state to a new object
    state.speed++; // increment the new object

    return state; // return the new state object 
}

這樣，它是一個新對象，因此舊狀態對象保持不變

Answer 3

如果您簽出Redux文檔，您會發現他們建議使用Object.assign（）或Object Spread 語法來防止狀態發生變化。

兩種解決方案都是可行的。

順帶提一下，鼓勵將switch語句用於reducers。

使用Object.assign（）

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