Почему переменная состояния внутри редуктора не увеличивается на 1

Question

У меня есть две простые кнопки на веб-странице, одна для увеличения и одна для уменьшения целого числа.

После того, как я нажму кнопку + , это добавит 1 к текущему значению.

Ниже мой редуктор, и я завернул "INCREMENT" с setTimeout, и когда я нажимаю кнопку + , я ожидаю увидеть 1 на странице через 2 секунды, но это дает me 77 как только щелчок происходит без ожидания в течение 2 секунд, почему это происходит, почему каждый раз 77?

ps Мне может понадобиться промежуточное программное обеспечение для обработки этого асин c действия, но я пытаюсь понять, что происходит

спасибо

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

Поскольку функция-редуктор работает детерминистически , возвращая новое значение состояния, учитывая старое состояние и любое другое действие.

В вашем коде вы просто переназначаете переменную состояния с помощью этой строки:

    state = state + 1

Если вы хотите обновить состояние через 1 секунду, я бы использовал следующее: setTimeout для отсрочки запуска действия «обновить состояние».