React.js/Redux : Reduers의 setInterval 및 clearInterval

Question

현재 FCC Game of Life에서 일하고 있으며 다음 앱 상태를 (점진적으로) 생성하는 방법을 알 수있었습니다.

즉, 내 다음 단계는 새로운 앱 상태 (세대)를 지속적으로 생성하는 방법을 파악하는 것입니다. 이 경우, 내 감속기 안에 setInterval 및 clearInterval을 구현하려고합니다.

내가 시작/

나는 그것을 구현하는 데 문제가 오전 일이 범위 문제 (state.start 상태를 전환하여) 새로운 세대를 생성 일시 정지 할 수있는 능력을 가지고 싶습니다

./

감속기 Object.assign

를 통해 기본적으로

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

, 차세대 기능 결과 새로운 응용 프로그램 상태 (세대) 및 업데이트 그것에 reducers_grid.js :

여기에 일부 내 감속기

처음에는 퍼팅을 생각했습니다. setInteveral 첫 번째 if 문 안에 두 번째 if 문에서 clearInterval하지만 분명히 범위 문제가 발생합니다.

로직의이 부분은 매우 사소한 것 같지만, 잠시 동안 여기에 붙어 있습니다.

Answer 1

감속기에서 사용하지 마십시오. 환원제는 순수한 기능이어야합니다 (부작용 없음). 대신 게임이 실행 중일 때만 렌더링되는 구성 요소를 만들 수 있습니다 (부울 상태는 START 동작으로 true, 동작은 STOP 동작으로 false로 설정 됨). 그런 다음 구성 요소의 componentDidMount 함수에서 setInterval을 호출하고 NEXT_GENERATION 동작을 전달하는 함수를 호출합니다. 그런 다음 타이머 id를 상점에 추가하는 다른 조치를 디스패치합니다. 그런 다음 componentWillUnmount에서 타이머 ID를 기준으로 간격을 제거합니다.