如何使用redux中的setTimeout和dispatcher触发定期操作

时间:2015-07-21 17:39:36

标签: javascript reactjs flux redux

如何/我可以在哪里定期发送行动?使用递归setTimeout进行倒计时。

从示例中得出类似于此的内容:

// Can also be async if you return a function
export function incrementAsync() {
  return dispatch => {
    (function _r() {
      setTimeout(() => {
        // Yay! Can invoke sync or async actions with `dispatch`
        dispatch(increment());
        _r();
      }, 1000);
    })();
  };
}

这是一个好主意,还是有更好的解决方法,比如使用中间件或从其他地方创建动作?

我更喜欢这个的通用版本,我可以通过商店控制定时器的启动/停止。

我已经设置了示例实现,请查看https://gist.github.com/eguneys/7023a114558b92fdd25e

2 个答案:

答案 0 :(得分:16)

你建议的方法很好,虽然有点复杂。通常,我会在组件生命周期方法中设置间隔(例如componentDidMount / componentWillUnmount),并避免在其他操作上设置间隔的操作。

如果您绝对需要这种灵活性,最好的办法是使用Rx进行异步管理,并dispatch使用可观察链末端的操作。这样就可以使用Redux(同步更新)并将异步组合留给Rx。

答案 1 :(得分:0)

有一个很棒的Medium post涵盖了这个问题。

Gustavo Machado 给出了componentDidMount / componentWillMount解决方案和dispatch选项中的redux的示例。

它对我有所帮助,所以您可能需要检查一下。