reactjs 状态未通过 redux 更新答案

【问题标题】：reactjs state not updating via reduxreactjs 状态未通过 redux 更新
【发布时间】：2016-11-27 04:36:21
【问题描述】：

我正在尝试使用 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 {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”函数，它将“todoTimer”状态的值减1，并在视图中渲染以创建计时器效果。

这就是操作页面的样子。

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

其他一切都在工作，因为我可以看到每隔 1 秒在控制台中打印出“timerTodo”状态（由 startTimer 函数执行）。但是，即使我将“todoTimer - 1”值传递给 startTimer 操作，todoTimer 的值也不会改变。

我觉得这种情况很奇怪的一点是“dispatch(actions.startTimer(todoTimer - 1));”会火，但只有一次。因此，一旦 todoTimer 状态的值减 1，它就会停止更新 todoTimer 状态，而 setInterval 函数中的其他代码（例如“console.log(todoTimer)”）会每隔一秒运行一次。

我该怎么做才能每隔一秒递减 todoTimer 状态的值？

【问题讨论】：

你确定dispatch 是道具吗？

标签： javascript reactjs redux state

【解决方案1】：

您每次都发送相同的值。因此组件只渲染一次。快速测试尝试：

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

setInterval 每次都应该获取 todoTimer 的值。

webpackbin DEMO

【讨论】：