React.js/Redux: setInterval i clearInterval w Reduktorkach

Question

Obecnie pracuję nad FCC Game of Life i udało mi się dowiedzieć, jak wygenerować kolejny stan aplikacji (przyrostowo).

W związku z powyższym, moim następnym krokiem jest ustalenie, jak generować nowy stan aplikacji (generacji) w sposób ciągły. W tym przypadku próbuję zaimplementować setInterval i clearInterval wewnątrz mojego reduktora .

Chciałbym mieć możliwość start/pauza generowania nowej generacji (poprzez przełączanie stanu w state.start)

Rzecz Mam problemy z wdrażania To kwestia zakres.

Oto część mój reduktor:

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

Zasadniczo funkcja NextGeneration Wyniki nowy stan aplikacji (generacja) i aktualizuje go za pośrednictwem Object.assign

Na początku myślałem, że umieszczenie setInteveral w pierwszym oświadczeniu if i clearInterval w drugiej instrukcji if, ale oczywiście spowoduje to problem z zasięgiem.

Wydaje się bardzo banalne tej części logiki, ale utknąłem na tym chwilę.

Answer 1

Nie rób tego w reduktorze. Reduktory powinny być czystymi funkcjami (co oznacza brak efektów ubocznych). Zamiast tego możesz utworzyć komponent, który jest renderowany tylko wtedy, gdy gra jest uruchomiona (stan boolowski ustawiony na true przez akcje START i false przez działanie STOP). Następnie w funkcji setInterval komponentu komponentu z funkcją, która wywołuje akcję NEXT_GENERATION. Następnie wyślij kolejną akcję, która doda identyfikator zegara do sklepu. Następnie w numerze componentWillUnmount usuń interwał w oparciu o identyfikator zegara.