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

Posted 2023-03-16

【中文标题】React.js/Redux：Reducers 中的 setInterval 和 clearInterval

【英文标题】：React.js/Redux: setInterval and clearInterval in Reducers

【发布时间】：2017-01-26 12:03:45

【问题描述】：

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

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

我希望能够开始/暂停生成新一代（通过切换 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 语句中，但显然这会产生范围问题。

这部分逻辑看起来很琐碎，但我一直坚持这一点。

【参考方案1】：

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