Клонирование реагирующих компонентов на новые окна через веб-работника

Question

Я ищу способ перемещения реагирующего компонента с его состоянием по окнам / вкладкам, чтобы обеспечить интерактивный разделенный экран для нашего интерфейса.

В настоящее время у меня есть общая настройка для веб-работника, где 2окна взаимодействуют друг с другом и передают данные между тем, когда должен быть перемещен компонент.

Я борюсь с тем, чтобы передать компонент реагирования через него и заставить новое окно выводить его.Я думал о нескольких возможностях: сначала использовать renderToString() для этого компонента и передать его через веб-работника в новое окно, однако я не уверен в правильной реализации для загрузки этого компонента обратно, как это было сделанона клиенте напрямую.Я также рассмотрел использование хранилища с избыточностью и сохранение этого контекста в веб-работнике, чтобы его состояние отображалось заново.

В идеале мне нужно своего рода представление данных компонента в его текущем состоянии, которое я могу кодировать /декодировать.

Любая идея с благодарностью!

Answer 1

Вы можете видеть компоненты React как представление состояния .

Так что то, что вы должны разделить между своими окнами / вкладками, это состояние.Реактивные компоненты будут синхронизироваться, если ваше реагирующее приложение обрабатывает изменения состояния.

Если у вас есть бэкэнд в вашем стеке, вы можете синхронизировать состояние с бэкэндом во всех окнах / вкладках.

Есливам нужна синхронизация в режиме реального времени на стороне клиента, вы можете использовать свое общее веб-решение для рабочих и просто поделиться сериализуемым состоянием .

Если вы используете redux, вы можете использовать redux-persist с пользовательской реализацией хранилища "web worker".