Javascript reactjs状态未通过redux更新
我正在尝试使用ReactJS和Redux构建一个简单的计时器应用程序,但Redux中的状态有点问题 这是密码Javascript reactjs状态未通过redux更新,javascript,reactjs,redux,state,Javascript,Reactjs,Redux,State,我正在尝试使用ReactJS和Redux构建一个简单的计时器应用程序,但Redux中的状态有点问题 这是密码 import React from "react"; var {connect} = require('react-redux'); var actions = require('actions'); export var TodoBtns = React.createClass({ startTimer: function (todoTimer) { var
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);
这就是reducers页面的外观
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(
}
这就是商店配置页面的外观
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(
}
其他一切都正常工作,因为我可以看到“timerTodo”状态每1秒在控制台中打印一次(由startTimer函数执行)。但是,即使我将“todoTimer-1”值传递给startTimer操作,todoTimer的值也不会更改
在这种情况下,我发现一件奇怪的事情是“dispatch(actions.startTimer(todoTimer-1));”确实会启动,但只启动一次。因此,一旦todoTimer state的值减1,它就会停止更新todoTimer状态,而setInterval函数中的其他代码(如“console.log(todoTimer)”每隔一秒钟就会运行一次
我该怎么做才能在每一秒钟内减少todoTimer状态的值?您每次都发送相同的值。因此,组件只渲染一次。 要快速测试,请尝试:
startTimer () {
setInterval(() => {
var {dispatch, todoTimer} = this.props;
dispatch(startTimer(todoTimer - 1));
}, 1000);
},
setInterval每次都应获取ToMotimer值
您每次发送的值都相同。因此,组件只渲染一次。 要快速测试,请尝试:
startTimer () {
setInterval(() => {
var {dispatch, todoTimer} = this.props;
dispatch(startTimer(todoTimer - 1));
}, 1000);
},
setInterval每次都应获取ToMotimer值
你确定
调度
是道具吗?你确定调度
是道具吗?