Доступ к приложению React из другого приложения React на той же странице

Question

У меня есть ситуация, когда я написал интерфейс моего сайта как микро-сервисы. Каждый функциональный раздел моего сайта - это приложение типа "реагирующая среда", связанное с css и html. Я сделал это, чтобы я мог повторно использовать эти разделы где угодно на сайте.

Моя проблема, однако, в области оформления заказа, мне нужно передать customerId из приложения входа в систему (при успешном ответе) в приложение адреса доставки, чтобы я мог вернуть адрес по умолчанию. Я не хочу создавать новое приложение и дублировать код для приложений с адресами входа и доставки, потому что мне нужно будет использовать их в другом месте на веб-сайте.

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

Обработчик кликов для входа в систему:

clickHandler(e) {
    e.preventDefault();
    let payload = {"email":this.props.email, "password":this.props.password};

        AuthenticationApp.login(payload).then((response) => {
            if (this.props.referrer === "checkout") {
                $("#checkout_login-register-tab").addClass("done");
                $("#checkout_login-delivery-tab").removeClass("todo");

                // Temporary hack to reload page until we can pass new user session into delivery/billing react app from here.
                location.reload();
            }
            this.props.updateParentState({isLoggedIn: true});
        })
        .catch(function(response){
            console.log("res2 - catch", response)
        });
    }

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

Answer 1

Вы можете сделать что-то вроде этого:

loadDeliveryApp(data) {
   ReactDOM.render(<DeliveryApp data={data} />, document.getElementById('delivery-app'))
   ReactDOM.unmountComponentAtNode(document.getElementById("login-app"))
}

clickHandler(e) {
  e.preventDefault()
  // your login stuff

  loadDeliveryApp(data)
}

Вот рабочая демка.

https://codepen.io/madhurgarg71/pen/dzgxMd

Answer 2

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

Я предлагаю поток для реакции среды обитания, как правило, так как отдельные магазины сохраняют его легким, а не один БОЛЬШОЙ магазин в избыточном, где у вас может быть мертвый код в среде обитания.

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