how to share data across different micro apps in single-spa

Question

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

Singlehearted

Does this answer your question? How do you share state in a micro-frontend scenario? – Tear

Answer 1

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.

Fawcette

great response and resources. thank you. – Strickman