Как обмениваться данными между более чем двумя приложениями React?

#javascript #reactjs #redux #react-redux #frontend

#javascript #reactjs #сокращение #react-redux #интерфейс

Вопрос:

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

Комментарии:

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

2. Действительно, серверное решение, такое как API, было бы вашим лучшим выбором.

3. Это было бы простым решением без кодирования на стороне сервера: firebase.google.com/products/realtime-database . (Я на них не работаю, просто довольный пользователь)

4. Спасибо за совет, но мне нужно решение на стороне интерфейса. У меня есть серверный API. Мои приложения при необходимости вызывают api, но в некоторых ситуациях, когда одно приложение запускает запрос, мне не нужно вызывать его в другом приложении, а мне просто нужно взять эти данные из другого приложения

Ответ №1:

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

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

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

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

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

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

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

В конце каждый из интерфейсных модулей:

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

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

Комментарии:

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

2. Я бы с удовольствием, но у меня возникли некоторые проблемы с этим: «Спасибо за отзыв! Голоса, поданные пользователями с репутацией менее 15, записываются, но не изменяют публично отображаемую оценку публикации.»

3. Проще и быть не может! Спасибо!