Реагентное наблюдение за дочерними элементами - я делаю это наилучшим образом?

Question

Я новичок в реактиве, и я все еще получаю голову вокруг флюса. Мой личный проект Hello World - приложение для отслеживания времени/биллинга, в основном прославленный секундомер, и я застрял.

По существу, есть компонент <TaskList /> с несколькими детьми <Task />. Запуск задачи создает интервал, хранящийся в компоненте задачи state, используемый для обновления отображаемого времени. Задачи могут быть запущены, остановлены и возобновлены, но одновременно не должно выполняться две задачи. Запуск/возобновление задачи должен остановить любые другие запущенные в данный момент.

Мой вопрос в том, как я могу указать, чтобы запущенная задача остановилась при запуске новой задачи?

В каждом из componentDidMount методов моей задачи компоненты, они слушают за START события, инициированного другими задачами, начиная и запустить свою собственную stop() функцию, если один излучаются, но я, кажется, нашел себя с ошибкой: Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch..

Я бы вставлял свой код, но моя кишка говорит, что я все это сделал, и мой код не имеет значения.

Должен ли я останавливать другие задачи в своем Магазине, а не в моем компоненте? Это имеет смысл, но как я могу очистить свои интервалы, прикрепленные к каждой задаче?

(Я надеялся, что резиновая утка на этом, возможно, поможет мне, но это не так).

Answer 1

Путь Flux - это сохранить все задачи в магазине. Как бы я это сделал:

У каждой задачи было бы состояние: «running» или «idle» и elapsedTime в секундах. Всякий раз, когда вы запускаете задачу из представления, вызывается ActionCreator. Этот создатель действия отправляет «TASK_STARTED» с идентификатором задачи как полезной нагрузкой. Обработчик отправки магазина прослушивает это действие и обрабатывает, какие задачи должны теперь выполняться или работать. Затем магазин выдает событие изменения, и представления обновляются сами.

Интервал может жить в представлении задачи (лучше, subview: TaskClockView), создавая действие каждую секунду «TASK_TIME_ELAPSED» с новым временем задачи. Магазин будет обновлять себя, а затем просматривать.

Answer 2

Не удалось настроить глобальную систему событий, чтобы остановить и запустить каждый таймер на основе того, что делает другой таймер, поскольку они не имеют одного и того же состояния, чем вы хотели бы посмотреть на эту документацию.

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

Однако этак вид отстой, я бы рекомендовал, родительский компонент, который генерирует состояние ребенка Components игровая управлять как дети запуска и остановки. дочерний компонент будет иметь onClick = {this.props.parentClickEvent}, который должен сообщить родителям, чтобы он начинал и останавливал таймер и т. д., если ему нужно знать, какой элемент был нажат, вам нужно будет посмотреть на функцию привязки, которая имеет возможность передать его (это) значение родительскому элементу.