Как поделиться состоянием пользовательского интерфейса в single-spa с помощью RxJs?

Question

Согласно официальному документу single-spa, мы можем поделиться состоянием пользовательского интерфейса приложения с помощью RxJ.

Observables / Subjects (RxJs) - один микрофронтенд передает новые значения в поток, которые могут быть использованы любым другим микрофронтендом. Он экспортирует наблюдаемое во все микрофронтенды из своего встроенного в браузер модуля, чтобы другие могли его импортировать.

Ссылка: https://single-spa.js.org/docs/recommended-setup/

Ссылка: https://single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications

Я пытался создать пример в React, где я использую посылку с одним спа для включения моих микроприложений в корневое приложение. Я пытался поделиться состоянием пользовательского интерфейса с помощью RxJ. Когда я поискал в Google RxJ с одним спа, я ничего не нашел. Может ли кто-нибудь предоставить мне базовый пример, в котором я смогу поделиться состоянием пользовательского интерфейса для следующих случаев использования:

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

Answer 1

Вот общий обзор того, как к этому подойти:

• добавить rxjs в качестве общей зависимости в карту импорта

  "rxjs": 'https://unpkg.com/@esm-bundle/rxjs/system/rxjs.min.js,
  "rxjs/operators": 'https://unpkg.com/@esm-bundle/rxjs/system/rxjs-operators.min.js,
  

  • подумайте о том, чтобы привязать их к определенной версии!
• создать служебный модуль (create-single-spa упрощает это!), который настраивает и экспортирует наблюдаемое с данными, которые вам нужны
• включить этот служебный модуль также в importmap
• импортировать и подписываться на наблюдаемое из служебного модуля в приложениях, которые в нем нуждаются
  • не забудьте отказаться от подписки, когда ваши приложения отключатся.
• праздновать

Answer 2

Это помогает. В корневом html js файле добавьте следующее

Import { Subject, Subscription } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { filter, map } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

export class EventBusService {


  constructor() {this.subject$ = new Subject(); }

  emit(event) {
    this.subject$.next(event);
  }

  on(eventName, action) {
    return this.subject$.pipe(
      filter( (e) => e.name === eventName),
      map( (e) => e["data"])).subscribe(action);
  }
}

var EventBus= new EventBusService()`enter code here`;



System.import('single-spa').then(function (singleSpa) {

    singleSpa.registerApplication(
      'app1',
      function () {
        return System.import('app1');
      },
      function (location) {
        return true;
       // return location.pathname.startsWith('/app1');
      },
      { EventBus: EventBus }
    );

    singleSpa.registerApplication(
      'app2',
      function () {
        return System.import('app2');
      },
      function (location) {
       return true
        // return location.pathname.startsWith('/app2');
      },
      { EventBus: EventBus }
    )

    singleSpa.start();
  })

В компоненте

import { Component,OnInit ,ChangeDetectorRef} from '@angular/core';
import { assetUrl } from 'src/single-spa/asset-url';
import { singleSpaPropsSubject, SingleSpaProps } from 'src/single-spa/single-spa-props';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app1-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {

  singleSpaProps: SingleSpaProps;
  subscription: Subscription;
  title = 'app1';
  yoshiUrl = assetUrl("yoshi.png");
  msgFromMicro="";
  titleToPass="";
  constructor(private ChangeDetectorRef:ChangeDetectorRef){

  }
  ngOnInit(): void {
    this.subscription = singleSpaPropsSubject.subscribe(
      props => {
        this.singleSpaProps = props;
        console.log(props);
        this.lookForEvents();
      }
    );
  }
  lookForEvents(){
    this.singleSpaProps['EventBus'].on('msgFrmMicro2',(data)=>{
      this.msgFromMicro=data;
      this.ChangeDetectorRef.detectChanges();
    });
  }
  sendMsg(){
   // alert(this.titleToPass);
   debugger;
   this.singleSpaProps['EventBus'].emit({name:'msgFrmMicro1',data:this.titleToPass});
  }
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Взгляните на следующее репо, обрабатывающее тот же сценарий, передав наблюдаемую ссылку в микроприложения через customprops одного спа

https://github.com/SENTHILnew/micro_spa_intercom