react redux中的定时器：跟踪滴答或仅启动/停止的动作

Question

我一直在做一些关于react redux中定时器实现的研究。似乎有两个小学的思想。

仅对停止/启动/重置使用操作

在这篇SO帖子中解释（Creating a stopwatch with redux）。

对秒表的每个刻度也使用一个动作

我已在此react/redux issue中了解到这一点。似乎丹·阿布拉莫夫（Dan Abramov）对此进行了评论。也许这种方法的凭证？

这是最好的做法吗？还是取决于具体情况？我正在为我的应用程序制作一个计时器来跟踪某个任务的时间长度，我只是想以正确的方式实现它，这是第一次。我最初的想法是倾向于选项1。

Answer 1

有很多情况下＆＃34; tick＆＃34;想法不起作用：

• 如果计时器需要在页面关闭时继续运行，或
• 如果用户在慢速设备上或计算机冻结，则计时器可以“漂移”＃34;因为滴答事件被延迟或跳过。

Redux状态的更好解决方案可能是：

tasks: [
    { id: '6d5d9f59-a65c-44ad-bf76-b69ef89b4f58',
      title: 'Task One',
      startTime: 1482160636032 },
    { id: '25a502e9-f2ef-4f65-bba6-723cc755c708',
      title: 'Task One',
      startTime: 1482160697663 }
]

使用此功能，您只需要减去Date.now () - task.startTime即可获得已用时间。

然后，对于计时器，我会重新计算React组件中的每一秒：

class Task extends Component {
    componentDidMount () { tick () }
    componentWillUnmount () { clearTimeout (timer) }
    tick () {
        // time until next second
        // won't drift with time
        const nextSecond = 1000 - Date.now () % 1000
        this.timer = setTimeout (tick, nextSecond)

        this.setState ({ elapsedTime: Date.now () - this.props.task.startTime })
    }
    render () { ...  }
}