https://github.com/paalamugan/single-spa-example-global

Share data between single spa microfrontend application.
https://github.com/paalamugan/single-spa-example-global

microfrontend observable single-spa state-management typescript

Last synced: about 5 hours ago
JSON representation

Share data between single spa microfrontend application.

• Host: GitHub
• URL: https://github.com/paalamugan/single-spa-example-global
• Owner: paalamugan
• Created: 2022-07-16T10:29:55.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-16T18:39:55.000Z (over 2 years ago)
• Last Synced: 2024-10-12T19:51:40.082Z (about 1 month ago)
• Topics: microfrontend, observable, single-spa, state-management, typescript
• Language: TypeScript
• Homepage:
• Size: 145 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Single spa example global

Single spa example share data between one to other single spa microfrontend application.

## How to Use

- One Way to do, Registered store from single-spa microfrontend

  ```ts

  import { ReduxStoreDistributor } from "@single-spa-example/global";

  const storeDistributor = new ReduxStoreDistributor();

  storeDistributor.registerStore(storeName, store);

  ```

- Another Way to do, Registered store from single-spa microfrontend

  ```ts

  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";

  storeDistributor.registerStore(storeName, store);

  ```

- Add Below line, Where you would like to access registered Store state value.

  ```ts

  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";

  const state = storeDistributor.getState(storeName);

  console.log("state", state);

  ```

- Add Below line, Where you would like to access registered Store state value as observable.

  ```ts

  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";

  const state$ = storeDistributor.getState$(storeName);

  state$.subscribe((state) => {

    console.log("state", state);

  });

  ```

- Add Below line, To update data from one microfrontend to other microfrontend

  ```ts

  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";

  storeDistributor.dispatch({ type: "INCREMENT", payload: 1 });

  ```

## Getting started

- Supported Node Engine

```

node - v16.12.0

yarn - 1.22.19

```

- Install node_modules package for first time only

```sh

yarn install

```

- Run application in development mode

```sh

yarn start

```

- Run application as a standalone in development mode

```sh

yarn start:standalone

```

- To build for production

```sh

yarn build

```