reactjs状態は還元しないで更新します

Question

私はReactJSとReduxを使って簡単なタイマーアプリケーションを構築しようとしています。

ここにコードがあります。このページ

import React from "react"; 

var {connect} = require('react-redux'); 
var actions = require('actions'); 

export var TodoBtns = React.createClass({ 
    startTimer: function (todoTimer) { 
     var {dispatch} = this.props; 
     setInterval(() => { 
      console.log(todoTimer); 
      dispatch(actions.startTimer(todoTimer - 1)); 
     }, 1000); 
    render: function() { 
     var {todoTimer} = this.props; 
     return (
      <div> 
       <a className="button" onClick={() => { 
        this.startTimer(todoTimer); 
       }}>Start</a> 
       <p>{todoTimer}</p> 
      </div> 
     ); 
    } 
}); 

export default connect(
    (state) => { 
     return { 
      todoTimer: state.todoTimer 
     }; 
    } 
)(TodoBtns); 

、私は1で、「todoTimer」状態の値をデクリメントし、タイマー効果を作成するために、ビューでそれをレンダリングする「startTimer」機能を実行するためのアンカータグをしたいです。

これは、アクションページの外観です。

export var startTimer = (todoTimer) => { 
    return { 
     type: "START_TIMER", 
     todoTimer 
    }; 
}; 

これはレデューサーのページの外観です。

export var startTimerReducer = (state = 0, action) => { 
    switch (action.type) { 
     case "START_TIMER": 
      return action.todoTimer; 
     default: 
      return state; 
    } 
}; 

これは店舗構成ページの外観です。

import * as redux from "redux"; 
import {startTimeReducer} from "reducers"; 

export var configure = (initialState = {}) => { 
    var reducer = redux.combineReducers({ 
     todoTimer: startTimeReducer 
    }); 

    var store = redux.createStore(reducer, initialState, redux.compose(
} 

私は（startTimer機能によって実行）1秒ごとにコンソールにプリントアウトされている「timerTodo」状態を見ることができるように他のすべてが働いています。しかし、 "todoTimer - 1"の値をstartTimerアクションに渡しても、todoTimerの値は決して変化しません。

私がこの状況で奇妙に感じることの1つは、 "dispatch（actions.startTimer（todoTimer - 1））;"ただ一度しか火を出さない。したがって、todoTimerステートの値が1減少すると、todoTimerステートの更新が停止され、console.log（todoTimer）などのsetInterval関数内の他のコードは1秒ごとに実行され続けます。

todoTimer状態の値を1秒ごとに減らすにはどうすればよいですか？

Answer 1

毎回同じ値を送信しました。したがって、コンポーネントは一度だけレンダリングされます。 簡単なテストの試みについて：

startTimer() { 
    setInterval(() => { 
     var {dispatch, todoTimer} = this.props; 
     dispatch(startTimer(todoTimer - 1)); 
    }, 1000); 
}, 

たsetIntervalはtodoTimer値を毎回取得する必要があります。

webpackbin DEMO