Реагировать.js / Redux: setInterval и clearInterval в редукторах

В настоящее время я работаю над FCC Игра жизни и я смог выяснить, как создать следующее приложение государственный (поэтапно).

это, как говорится, мой следующий шаг-выяснить, как генерировать новое состояние приложения (поколение) непрерывно. В этом случае я пытаюсь реализовать setInterval и clearInterval внутри моего редуктор.

Я хотел бы иметь возможность запускать / приостанавливать создание нового поколения (путем переключения состояния в государство.старт)

то, что у меня возникли проблемы с его реализацией, - это проблема области.

вот часть моего редуктора:

редукторы/reducers_grid.js

export default function(state = initialState, action){
  switch (action.type) {
    ....
    case START:
      let toggleStart = state.start === true ? false : true;

      if (state.start === true){
        console.log('START THE GAME')

        const newGeneration = nextGeneration(action.payload,state)
        return Object.assign({}, state, {cells: newGeneration, start: toggleStart })
      }
      else {
        console.log('PAUSE THE GAME')
        return Object.assign({}, state, {start: toggleStart })
      }

  return state;
}

по сути, функция nextGeneration приводит новое состояние приложения (поколение) и обновляет его до объекта via.назначить

сначала я думал, что поставив setInteveral внутри первого оператора if и clearInterval во втором операторе if, но, очевидно,это создаст проблему области.

это кажется очень тривиальной частью логики, но я застрял на этом некоторое время.

1 ответов


Не делайте этого в редукторе. Редукторы должны быть чистыми функциями (что означает отсутствие побочных эффектов). Вместо этого вы можете создать компонент, который отображается только при запуске игры (логическое состояние, которое имеет значение true на START действия и false на STOP действие). Тогда в компоненте componentDidMount вызов функции setInterval С функцией, которая передает NEXT_GENERATION действие. После этого отправьте другое действие, которое добавляет идентификатор таймера в магазин. Затем, в componentWillUnmount удалить интервал на основе идентификатора таймера.