reactjs狀態不通過REDX更新

我想建立一個簡單的計時器應用程序使用ReactJS和Redux和在REDX狀態有一點問題。reactjs狀態不通過REDX更新

這裏是代碼。

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

在這個頁面上，我想錨標記執行「startTimer所」功能，將減1的「todoTimer」狀態的價值並使其在視圖中創建一個定時器的作用。

這就是操作頁面的樣子。

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

這是reducers頁面的樣子。

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

其他一切工作我所看到的被打印出來，在每1秒（由startTimer所函數執行）控制檯的「timerTodo」狀態。然而，即使我將「todoTimer - 1」值傳遞給startTimer操作，todoTimer的值也不會改變。

有一件我覺得奇怪的情況是「dispatch（actions.startTimer（todoTimer - 1））;」做火，但只有一次。因此，一旦todoTimer狀態的值減1，它就會停止更新todoTimer狀態，而setInterval函數內的其他代碼（如「console.log（todoTimer）」）則每隔一秒繼續運行一次。

我該怎麼做才能在每一秒內遞減todoTimer狀態的值？

來源

2016-07-23 oosniss

你確定'dispatch'是一個道具？ –

您每次都發送相同的值。因此組件只渲染一次。對於快速測試嘗試：

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

的setInterval應該每次得到todoTimer值。

webpackbin DEMO

來源

2016-07-23 15:48:08

reactjs狀態不通過REDX更新

回答

相關問題