Question

目前我正在研究FCC Game of Life，我能够弄清楚如何生成下一个应用状态（逐步增加）。

话虽这么说，我的下一步是弄清楚如何连续生成新的应用状态（生成）。在这种情况下，我尝试在 reducer 中实现setInterval和clearInterval。

我希望能够开始/暂停生成新一代（通过在 state.start 中切换状态）

我无法实现它的是范围问题。

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

减速器/ 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将其更新为

首先，我想在第一个if语句中放置 setInteveral ，在第二个if语句中放置 clearInterval ，但显然会产生范围问题。

这部分逻辑似乎非常微不足道，但我已经被困在这一段时间了。

Answer 1

请勿在减速机中执行此操作。减速器应该是纯函数（意味着没有副作用）。相反，您可以创建仅在游戏运行时呈现的组件（由true操作设置为START的布尔状态和false设置为STOP行动）。然后在组件的componentDidMount函数调用setInterval中使用一个调度NEXT_GENERATION操作的函数。之后发送另一个动作，将定时器ID添加到商店。然后，在componentWillUnmount中删除基于计时器ID的间隔。

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

1 个答案: