Немного предыстории: я пытаюсь выучить React и создаю небольшое приложение с next (используя шаблон из учебника, который я делал некоторое время go). Недавно я столкнулся с проблемой, когда мне нужно синхронизировать таймер между двумя компонентами, которые не находятся в одной иерархической структуре.
У меня есть компонент Item, который отображает некоторые подробности об этом элементе (описание, заголовок и т. д. c) в более сжатой форме (фрагмент, отображающий только часть всей информации об элементе). Если я нажму на плитку Item, у меня появится следующий компонент js Link, который выглядит следующим образом:
<Link href={{pathname: "/item", query: { id: item.id }}}>
<a>{item.title}</a>
</Link>
, который перенаправит меня на новую страницу, содержащую компонент ItemDetails, который просто отображает всю информацию для этого элемента более подробно и используя всю страницу вместо только плитки, используемой для Item.
Как упомянуто выше, проблема в том, что я хочу, чтобы таймер обратного отсчета был синхронизирован c между Item и ItemDetails (может быть запущен, остановлен и т. Д. c из любого из из них, и это состояние будет отражено в другом компоненте). Сначала я подумал об использовании MobX и создании хранилища, а также о том, чтобы сохранить одинаковое состояние между двумя компонентами. Однако проблема в том, что у меня есть несколько экземпляров компонента Item, каждый из которых указывает на свой собственный ItemDetails и использует одно хранилище, которое просто делит состояние первого запущенного таймера между всеми Item с. (хотя здесь я могу ошибаться, поскольку MobX - это то, о чем я только что начал читать вчера ^^).
Мой вопрос: как лучше всего подойти к этой проблеме? Это выполнимо с использованием магазинов Mobx plus или это вопрос структуры приложения (например: найти способ сделать Item и ItemDetails частью одной иерархической структуры?
Любая помощь будет оценили.