クロックがゼロになった後で新しいコンポーネントに移動するには

Question

3つのコンポーネントセクション（手順、ストーリー、クイズ）を持つReact and Reduxアプリがあります。各セクションは3つのセクションで構成されています。 。命令には、ユーザーがストーリーセクションに進むことができるボタンがあります。そのため、移行は簡単です。ただし、Quizコンポーネントがゼロになると、Quizコンポーネントに移行するために必要な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に時間を保存し、タイマーから起動されたアクションを使用して時間を減らします。

コンポーネントを表示するかどうかを判断するために、条件式のtimerに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のようなライブラリに基づいて実際の時間を計算し、これを適切に行うことをお勧めだろうが、私はこの質問の範囲を超えてだと思います。