How to send data between portal and child?

[lyzJoey]

I check the single-spa-portal-example sample code. We can use the redux to share the data between portal and child app. It's like the copy of the data between child app. For now, I want to send the data to another child app after triggering the event like click the submit button. Can I do this using single-spa?

[me-12]

Did you take a look at https://github.com/me-12/single-spa-portal-example? In this example project you can click on the "global increment" or "global decrement" button in either the react app or the angular5 app. Each click will send the click event to the other app.

[lyzJoey]

@me-12 I saw that button. But it's used to synchronize the data between two apps. For now, like in app1, click submit button to submit a form. I'm wondering if the portal can get this data and transfer it to the app2? Or even if the portal decides not to transfer data, app2 will never receive it. I look some docs about single-spa, but can't find if he can do this.

[me-12]

That button does not synchronize the data, it does just send an event which the other app receives and processes.

If you want to send some form data from app1 to app2, you need to dispatch an event from app1 which has some payload. And in app2 you will receive this event inclusive payload. Then you can process this data in any way you like.

For example:
1.

// App1: 
this.props.globalEventDistributor.dispatch({ type: 'FORM_SUBMITTED', payload: 'some_form_data' });

// App2:
function reducer(state = initialState, action) {
  switch (action.type) {
    case FORM_SUBMITTED:
      console.log(action.payload) // do something with your form data
    default:
      return state
  }
}

Have a look at the redux documentation to understand how this works in detail https://redux.js.org/

[joeldenning]

@me-12 thanks for jumping in and helping out with this one. I agree that passing custom props is a good way to share data between applications.

@lyzJoey Does me-12's response help explain how you can get redux actions to dispatch between applications? The mount lifecycle function is given customProps, which could include a reference to your redux store, to an event emitter, or to a bound dispatch function. If you're still running into issues, could you provide some code samples? Maybe paste the code you've changed from single-spa-portal-example to give us a starting place to help?

Also, check out #112 and #142 for previous discussion about inter-app communication and redux.

[JeanOsorio]

@joeldenning could you make an example of how to get the customProps from my child app, because, I can se using the react explorer that I have my custom prop, but I don't really know how to get and use the value

[GeorgianSorinMaxim]

Similar issue here

I'm creating a global store for intra-app communication using a Redux store created in the root app which is then passed via the customProps to the children using singleSpa.registerApplication(name, appURL, activeWhen(path), customProps);. This is done in a similar way to the example found within single-spa.

I'm using SystemJS to download and execute the javascript code from the children app in the root so that I can build and deploy the children separately (using a lerna monorepo).

The issue is that I need to access the data from the root app as well because I change the look of the layout based on what buttons were pressed in a child app. When logging the Redux store state in the childern apps, every update to the store works fine, but when logging the Redux store state in the root app, I get the initial state and no subsequent updates.

Do you have an idea of how to make the root app access the data in the global store when using the SystemJS approach? Thanks

[frehner]

@JeanOsorio please see https://single-spa.js.org/docs/building-applications.html#custom-props

Let us know if you have any other questions