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

Question

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

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

Answer 1

通常使用componentDidMount和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)