클럭이 0이 된 후에 새 구성 요소로 이동하는 방법

Question

3 개의 구성 요소 섹션 (설명, 스토리 및 퀴즈)이있는 React and Redux 앱이 있습니다. 각 섹션에는 3 개의 섹션이 있으므로 총 9 개 . 지침에는 사용자가 스토리 섹션으로 진행할 수있는 버튼이있어서 전환이 쉽습니다. 그러나 Quiz 구성 요소가 0이 될 때 전환하는 데 사용해야하는 Story 구성 요소의 카운터가 있습니다. 여기 여기

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 

import { connect } from 'react-redux' 
import { bindActionCreators } from 'redux' 
import { confirmInstructions, enterAnswersMaybeSave, getQuiz, getStory 
} from '../actions' 

import Instructions from '../components/Instructions' 
import Story from '../components/Story' 
import Quiz from '../components/Quiz/index' 

const App = ({ 
    errorMessage, 
    enterAnswersMaybeSave, 
    showInstructions, 
    confirmInstructions, 
    currentTest, 
    kind, 
    storyData, 
    show, 
    timed, 
    getQuiz, 
    getStory, 
    saveQuiz, 
    complete, 
    enabled, 
}) => { 
    if (!currentTest) { 
    return (
    <div> 
     <p> 
     The task is now complete. Thank-you for your time.{' '} 
     <a href={window.wordpress.home}>Back to your dashboard</a>. 
     </p> 
     {errorMessage.length > 0 && <p>{errorMessage}</p>} 
    </div> 
) 

} 
return (
<div className="test"> 
    {showInstructions && (
    <Instructions 
     currentTest={currentTest} 
     confirmInstructions={() => confirmInstructions(currentTest)} 
    /> 
    )} 
    {!showInstructions && kind === 'story' && currentTest && 
    (
     <div> 
     <Story 
      kind='story' 
      id={currentTest} 
      timed={timed} 
      show={show} 
      enterAnswers={enterAnswersMaybeSave} 
      getQuiz={() => getQuiz(currentTest)} 
      complete={complete} 


     /> 
     </div> 
     )}, 
     {!showInstructions && kind === 'quiz' && currentTest && 
     (
      <Quiz 
      currentTest={currentTest} 
      submit={saveQuiz} 
      /> 
     )} 
    </div> 
    ) 
} 


App.PropTypes = { 
    enterAnswersMaybeSave: PropTypes.func, 
    showInstructions: PropTypes.bool, 
    confirmInstructions: PropTypes.func, 
    currentTest: PropTypes.number, 
    kind: PropTypes.string, // TODO: enum this 
    show: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 
    timed: PropTypes.number, // TODO: or undefined 
    errorMessage: PropTypes.string, 
} 
function mapStateToProps(state) { 
    console.log(state.kind); // state 
    console.log(arguments[1]); // undefined 
} 
export default connect(
    state => { 
    const getCurrent = state => state.storyData.find(t => t.id == 
state.currentTest); 

const getCurrentStory = state => state.storyData.find(t => t.kind == 
'story'); 
    return { 
     showInstructions: state.currentTest && 
!getCurrent(state).instructions, 
     currentTest: state.currentTest, 
     kind: state.currentTest && getCurrent(state).kind, 
     show: state.currentTest && getCurrent(state).show, 
     timed: state.currentTest && getCurrent(state).timed, 
     answers: state.currentTest && getCurrent(state).answers, 
     errorMessage: state.errorMessage, 
     complete: state.complete, 
     storyData: state.storyData 

    } 

    }, 
    dispatch => 
    bindActionCreators({ enterAnswersMaybeSave, confirmInstructions, 
getQuiz, getStory}, dispatch) 
)(App) 

아래에있는 내 코드입니다 그리고 여기 내 행동 제작자

export const getQuiz = payload => ({ 
     type: GET_QUIZ, 
     payload: 'quiz' 
     }) 

그리고 것은 내 감속기의

import { GET_QUIZ } from '../constants/ActionTypes' 
export default (state = [], action) => { 
    if (action.type === 'GET_QUIZ') { 
     let newState = { ...state, kind: action.payload}; 
     console.log(newState) 
     return newState; 
    } else { 
     return state 
    } 
} 

Answer 1

당신은 아마 원하는 것 redux에 시간을 저장하고 타이머에서 실행 된 동작을 사용하여 시간을 줄이십시오.

구성 요소를 표시할지 여부를 결정하려면 조건의 타이머에 redux prop를 사용하십시오. 그 값 구성 요소와 타이머를 감소 조치의 소품에 매핑과에 해고,

{this.props.quiz.timer === 0 && renderQuizComponent()} 

을하고 당신이 quiz라는 REDUX 감속기를 가지고 (https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options 참조) 이런 식으로 뭔가 작업을해야합니다 간격, 같은 :

setInterval(this.props.decrementTimer(), 1000); 

나는 MomentJS 같은 라이브러리를 기반으로 실제 시간을 계산, 제대로이 일을 권하고 싶습니다,하지만 난 그이 질문의 범위를 넘어 생각합니다.