React.js/Redux：ReduersのsetIntervalとclearInterval

Question

現在、私はFCC Game of Lifeに取り組んでおり、次のアプリケーション状態（インクリメンタルに）を生成する方法を理解できました。

私の次のステップは、新しいアプリケーションの状態（世代）を連続的に生成する方法を理解することです。この場合、私は減速機の中に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; 
} 

、次世代機能結果、新たなアプリケーションの状態（世代）と更新、それはObject.assign

経由へ

最初は、がセットされていたと思います。最初のif文の中に 2番目のif文でclearIntervalが表示されますが、明らかにそれがスコープの問題を作成します。

ロジックのこの部分は非常に些細なようですが、私はこれにしばらくこだわっています。

Answer 1

還元剤では行わないでください。レジューサーは、純粋な機能（副作用がないこと）でなければなりません。代わりに、ゲームが実行されているときにレンダリングされるコンポーネントを作成することができます（ブーリアンステートはSTARTアクションによってtrueに設定され、STOPアクションではfalseに設定されます）。次に、コンポーネントのcomponentDidMount関数呼び出しsetIntervalに、NEXT_GENERATIONアクションをディスパッチする関数があります。その後、タイマーIDをストアに追加する別のアクションをディスパッチします。次に、componentWillUnmountに、タイマーIDに基づいて間隔を削除します。