為什么 redux Reducer 中的狀態變量不會增加 1

Question

我在網頁上有一個簡單的兩個按鈕，一個用於遞增，一個用於遞減整數。

一旦我單擊+按鈕，它將在當前值上加 1。

下面是我的 Reducer，我用setTimeout包裹了“INCREMENT” ，當我點擊+按鈕時，我希望在 2 秒后在頁面上看到1 ，但只要點擊發生，它就會給我77 ，而無需等待 2 秒，為什么會這樣，為什么每次都是77？

ps 我可能需要一個中間件來處理這個異步操作，但我試圖了解發生了什么

謝謝

const mathReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return setTimeout(() => {
        state = state + 1
      }, 2000)
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

export default mathReducer

Answer 1

因為在給定舊狀態和任何操作的情況下，reducer 函數通過確定性地返回狀態的新值來工作。

在您的代碼中，您只是使用以下行重新分配狀態變量：

    state = state + 1

如果您想要做的是在 1 秒后更新狀態，我會做的是使用 setTimeout 延遲觸發“更新狀態”操作。