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

Question

目前我正在研究FCC Game of Life，我能夠弄清楚如何生成下一個應用程序狀態（增量式）。

這就是說，我的下一步是要弄清楚如何不斷產生新的應用程序狀態（代）。在這種情況下，我試圖在我的減速器中實現setInterval和clearInterval。

我想有開始/暫停產生新的一代（在state.start切換的狀態）

我有實現它麻煩的事情是範圍問題的能力。

這裏是我的一部分減速：

減速器/通過Object.assign

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; 
} 

從本質上講，下一代功能結果新的應用程序狀態（代），更新爲

起初，我以爲setInteveral裏面的第一條if語句和clearInterval在第二條if語句中，但很明顯會造成範圍問題。

這部分邏輯看起來很平凡，但我一直在這一段時間停滯不前。

Answer 1

不要在減速機中這樣做。減速器應該是純粹的功能（意思是沒有副作用）。相反，您可以創建僅在遊戲運行時呈現的組件（布爾狀態，其設置爲true,START操作和false,STOP操作）。然後在該組件的componentDidMount函數中調用setInterval，其中包含一個調度NEXT_GENERATION操作的函數。之後，派遣另一個行動，將定時器ID添加到商店。然後，在componentWillUnmount基於定時器ID刪除間隔。