4

I understand how to pass custom props to different micro apps when using single-spa but I want to know how I can take the output of an api call form app1 and use it in app2. app1 is using react-redux and app2 will be using react hooks.

import {registerApplication, start} from 'single-spa'


registerApplication(
    'navBar',          // Name of this single-spa application
    () => import('./nav/navbar.app.js').then(module => module.navBar),
    () => true
)

registerApplication(
  'app1',          // Name of this single-spa application
  () => import('./root.app.js'),//loadingFunction, // Our loading function
  () => true, //activityFunction // Our activity function
)

registerApplication(
    'app2',          // Name of this single-spa application
    () => import('./app2/app2.app.js').then(module => module.app2),
    location =>
        location.pathname === '/app2' ||
        location.pathname.startsWith('/app2'),
    {
        some: 'value',
    }
)

start()

Or how can I call a root api call and share output across all micro apps. The above is my index.js which is called by webpack.

I am using single-spa version 4.x and webpack 4.x

shorif2000
  • 2,582
  • 12
  • 65
  • 137
  • Does this answer your question? [How do you share state in a micro-frontend scenario?](https://stackoverflow.com/questions/60548251/how-do-you-share-state-in-a-micro-frontend-scenario) – Juanma Menendez Sep 07 '21 at 13:52

1 Answers1

8

Sharing application state in single-spa is achieved using a utility module pattern to create a "service" that can be leveraged using cross-microfrontend imports to share cross all your microfrontends.

One example of this is using Rxjs to share login state cross multiple frontends, which you can find here: https://github.com/filoxo/single-spa-example-rxjs-shared-state Disclaimer: I authored this example.

filoxo
  • 8,132
  • 3
  • 33
  • 38