reactjs - 如何使用 Redux 通过计时器调度操作

Question

我想每秒发送一个动作来更新无状态组件的显示。我最初window.setInterval的天真尝试涉及调用 render 函数，然后在每次组件呈现时调用该函数，每次都启动一个新计时器。

我考虑过关闭一个指示计时器是否已经启动的变量，但这会违反无状态组件的概念。我想知道通过 React+Redux 完成此任务的适当方法是什么，理想情况下，同时继续使用无状态组件。

Answer 1

通常通过 usingcomponentDidMount和componentWillUnmount生命周期钩子进行此类操作。如果你想用 Redux 来做，你应该在容器中实现它，如果你需要的话，你应该将更新的值传递给无状态组件。

例如：

class SomeContainer extends Component {

    _tick = () => {
        this.props.someAction()
    }

    render() {
        return <SomeComponent reduxValue={this.props.someValueFromRedux} />
    }

    componentDidMount() {
        this.timer = setInterval(this._tick, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }
}

const mapStateToProps = ({ someReducer }) => {
    return {
        someValueFromRedux: someReducer.someValueFromRedux
    }
}

export default connect(mapStateToProps, { someAction })(SomeContainer)