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
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.