Как обмениваться данными между более чем двумя приложениями React? - PullRequest
0 голосов
/ 26 марта 2019

Мне нужно поделиться некоторыми данными для более чем одного приложения, некоторые данные защищены, а некоторые нет. Это необходимо для избежания множественных идентичных запросов от приложений. Я рассмотрел IndexedDb, localStorage, но в некоторых браузерах в режиме инкогнито он не работает. Возможно, последний способ - это создать родительское приложение, которому будет предоставлен интерфейс API, сделать тот же запрос и предоставить состояние дочерним компонентам через глобальный объект, а дочерние компоненты могут вызвать запрос, если это необходимо, через глобальный API, но это очень странно, и любой может изменить свой объект. Кто-нибудь знает, как решить эту проблему? Любая идея будет полезна для меня! Спасибо за совет!

1 Ответ

0 голосов
/ 26 марта 2019

Возможно, вы сможете исследовать инфраструктуру Micro Frontends. Термин «Micro Frontends» впервые появился в технологическом радаре ThoughtWorks в конце 2016 года. Он расширяет понятия микросервисов в мире внешнего интерфейса.

По сути, вы можете начать с «оболочки» приложения, которое содержит глобальное состояние или данные, такие как маршрутизация, сеансы, токены аутентификации и т. Д.

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

Например, вы можете создать событие «print_report» в оболочке:

window.dispatchEvent(new Event("print_report") );

И выполнить его в приложениях подуровня:

window.addEventListener("print_report", () => { call_back(data); });

В конце каждого модуля внешнего интерфейса:

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

Для получения дополнительной информации о вышеупомянутом, пожалуйста, прочитайте:

...