Menu
I have an HTML page that is including two separate webpack-generated React bundles, each with its own index.js entry file that just does a RenderDOM.render() of its respective component to its respective <div>.
<!doctype html>
<html lang="en">
<head>
<link href="stylesheets/styles.css" rel="stylesheet">
</head>
<body>
<div>
<div id="retrieveBtn"
style="border: 1px solid black; padding: 5px; width: 10%">
Recuperar Presupuesto
</div>
<div id="lightbox-portal"
style="display: none; border: 1px solid grey">
<div id="react-retrieve"></div>
</div>
</div>
<section class="tariff">
<div id="react-main" class="tariff__content fadeIn js-animated"></div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/eco/econonrps_vflx/build/static/js/main_bundle.js"></script>
<script src="/eco/retrieve_vflx/build/static/js/retrieve_bundle.js"></script>
</body>
</html>
When <div id="uxvida-retrieve"></div> is displayed and we enter data in it, we receive an AJAX response with assorted data.
We tried this: On page load each component gets rendered, we receive data and from component attached to id="react-retrieve" we do another ReactDOM.render() to id="react-main".
That generates a lot of coupling and the constructors get called again, and I don't want that.
In short, how do I pass that data to the other React Component/App without calling again ReactDOM.render()?
375
I think localStorage is the answer. I reached here with the exact same question of sharing data while using a micro-frontend architecture. I am using localstorage currently and that seems to be perfect solution providing availability of data without race conditions.
Things to consider: 1. localStorage data is always stored as string. 2. While saving structured JSON object, stringify and after retrieval parse. 3. It might become a bad choice while trying to save dynamic data involving scripts, etc that cannot be easily stringified. 4. Saving it in a global variable and delaying in react app initialization till the variable is available for the app to consume can be a good choice here. This can be done via a recursive function call or timeout while retrieving the data from global var.
let data = false; // tmp global var consisting data.
const getData = ()=>{
if(!data){
setTimeout(()=>{getData()},100) // timeout simply to be considerate
}
}
cheers.
137
Quite an old question, but I just had the same problem. I have 2 components embedded in one page (separate react apps). One of the components send Ajax request, and the second one must do sth after the first one get the response.
I solved the problem with CustomEvents https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events. Simply after the first component fetch the results, it sends the custom event that the other component is listning to.
I'm not a frontend developer, so not sure if it is the correct way to handle the issue but it seems a good solution to me.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
