reactjs nicht über redux aktualisieren

Question

Ich versuche, eine einfache Timer-App mit ReactJS und Redux zu bauen und ein kleines Problem mit dem Status in redux.

Hier sind die Codes.

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

Auf dieser Seite mag ich den Anker-Tag „starttimer“ Funktion auszuführen, die den Wert von „todoTimer“ -Zustand um 1 dekrementiert werden und es in der Ansicht machen, um einen Timer-Effekt.

So sieht die Aktionsseite aus.

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

So sieht die Reducers-Seite aus.

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

Und so sieht die Store-Konfigurationsseite aus.

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

Alles andere arbeitet als ich die „timerTodo“ -Zustand in alle 1 Sekunde in der Konsole ausgedruckt (durch starttimer Funktion ausgeführt) wird sehen können. Der Wert von todoTimer ändert sich jedoch nie, obwohl ich den Wert "todoTimer - 1" an die startTimer-Aktion übergebe.

Eine Sache, die ich seltsam finde mit dieser Situation ist, dass die "Versand (actions.startTimer (todoTimer - 1));" feuert, aber nur einmal. Sobald der Wert von todoTimer state um 1 dekrementiert wird, wird die Aktualisierung des todoTimer-Status gestoppt, während andere Codes innerhalb der setInterval-Funktion wie "console.log (todoTimer)" in jeder Sekunde ausgeführt werden.

Was kann ich tun, um den Wert des TodoTimer-Status in jeder Sekunde zu verringern?

Answer 1

Sie haben jedes Mal den gleichen Wert gesendet. Daher rendert die Komponente nur einmal. Für einen schnellen Test Versuch:

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

setInterval sollte todoTimer Wert jedes Mal bekommen.

webpackbin DEMO