React.js/Redux：Reducers 中的 setInterval 和 clearInterval

Question

目前我正在研究 FCC Game of Life 并且我能够弄清楚如何生成下一个应用程序状态（增量）。

话虽这么说，我的下一步是弄清楚如何连续生成新的应用程序状态（生成）。在这种情况下，我试图在我的 reducer.

中实现 setInterval 和 clearInterval

我希望能够 start/pause 生成新一代（通过切换 state.start 中的状态）

我在实现它时遇到的困难是范围问题。

这是我的减速器的一部分：

reducers/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 函数 生成新的应用程序状态（生成）并将其更新为通过 Object.assign

起初，我想将 setInteveral 放在第一个 if 语句中，将 clearInterval 放在第二个 if 语句中，但显然这会创建范围问题。

这部分逻辑看起来很琐碎，但我一直卡在这上面。

Answer 1

不要在减速器中这样做。 Reducers 应该是纯函数（意味着没有副作用）。相反，您可以创建一个仅在游戏处于运行时呈现的组件（一个布尔状态，由 START 操作设置为 true 并由 STOP 行动）。然后在组件的 componentDidMount 函数调用 setInterval 中使用一个函数来调度 NEXT_GENERATION 操作。之后分派另一个将计时器 ID 添加到商店的操作。然后，在 componentWillUnmount 调用 clearInterval 时使用计时器 ID。

React.js/Redux：Reducers 中的 setInterval 和 clearInterval

React.js/Redux: setInterval and clearInterval in Reducers

setinterval

reducers

reactjs

redux

react-redux