React 组件兄弟事件观看 - 我这样做是最好的方式吗?

React component sibling event watching - am I doing it the best way?

我是 React 的新手,我仍然在关注 flux。我个人的 Hello World 项目是一个时间 tracking/billing 应用程序,基本上是一个美化的秒表,我被卡住了。

本质上有一个 <TaskList /> 组件有多个 <Task /> 子组件。启动任务会创建一个存储在任务组件 state 中的间隔,用于更新经过的时间显示。可以启动、停止和恢复任务,但不应 运行 同时执行两个任务。 Starting/resuming 一个任务应该停止当前 运行ning 中的任何其他任务。

我的问题是如何指示 运行ning 任务在新任务启动时停止?

在我的任务组件的每个 componentDidMount 方法中,它们监听由其他任务启动触发的 START 事件和 运行 它们自己的 stop() 函数(如果有的话)已发出,但我似乎发现自己遇到了错误:Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch..

我会粘贴我的代码,但我的直觉告诉我我做错了,我的代码无关紧要。

我应该在我的 Store 中而不是在我的组件中停止我的其他任务吗?这是有道理的,但我如何清除附加到每个任务的间隔?

(我希望 Rubber Ducking 在 SO 上对我有所帮助,但没有)。

如果没有设置一个全局事件系统来根据另一个计时器正在做的事情来停止和启动每个计时器,因为它们不共享相同的状态,那么您可能希望查看此文档。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

但是这种方式有点糟糕,我建议让生成子组件状态的父组件管理子组件的启动和停止方式。子组件将有一个 onClick={this.props.parentClickEvent} ,它应该告诉父组件启动和停止计时器等...如果它需要知道具体单击了哪个元素,您将需要查看绑定函数能够将它的(this)值传递给父元素。

Flux 方法是将所有任务保存在一个存储区中。我会怎么做:

每个任务都有一个状态:'running' 或 'idle' 以及以秒为单位的 elapsedTime。每当您从视图启动任务时,都会调用 ActionCreator。此操作创建者使用任务 ID 作为有效负载调度 "TASK_STARTED"。商店的调度处理程序侦听此操作,并处理哪些任务现在应该 运行 或空闲。然后商店发出更改事件,视图会自行更新。

间隔可以存在于任务视图中(更好的是,子视图:TaskClockView),每秒创建一个动作 "TASK_TIME_ELAPSED",使用新的任务时间。商店将更新自身,然后更新视图。