reactjs – React.js / Redux:Reducers中的setInterval和clearInterval

前端之家收集整理的这篇文章主要介绍了reactjs – React.js / Redux:Reducers中的setInterval和clearInterval前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我正在 FCC Game of Life工作,我能够弄清楚如何生成下一个应用程序状态(递增).

话虽这么说,我的下一步是弄清楚如何连续生成新的应用程序状态(生成).在这种情况下,我试图在我的reducer中实现setInterval和clearInterval.

我希望能够启动/暂停生成新一代(通过在state.start中切换状态)

我实现它的麻烦是范围问题.

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

减速器/ reducers_grid.js

  1. export default function(state = initialState,action){
  2. switch (action.type) {
  3. ....
  4. case START:
  5. let toggleStart = state.start === true ? false : true;
  6.  
  7. if (state.start === true){
  8. console.log('START THE GAME')
  9.  
  10. const newGeneration = nextGeneration(action.payload,state)
  11. return Object.assign({},state,{cells: newGeneration,start: toggleStart })
  12. }
  13. else {
  14. console.log('PAUSE THE GAME')
  15. return Object.assign({},{start: toggleStart })
  16. }
  17.  
  18. return state;
  19. }

从本质上讲,nextGeneration函数生成新的应用程序状态(生成)并通过Object.assign将其更新

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

这部分逻辑似乎非常微不足道,但我一直坚持这一点.

不要在减速机中这样做.减速器应该是纯函数(意味着没有副作用).相反,您可以创建仅在游戏运行时呈现的组件(由START操作设置为true且由STOP操作设置为false的布尔状态).然后在组件的componentDidMount函数调用setInterval,该函数调用NEXT_GENERATION操作.之后,发送另一个动作,将计时器ID添加到商店.然后,在componentWillUnmount中根据计时器id删除间隔.

猜你在找的React相关文章