Sharing State Between Vanilla and React Apps with Redux

The problem statement

I want to share a common data state between vanilla js and react app.

What is in this POC

• We will create two similar counter apps in vanilla and react.
• The count should be stored in a common state
• If we update the count in vanilla, it should be reflected in react and vice-verse

Project Structure

Our project is divided into two main sections:

1. Root Directory: Contains core files for the vanilla JavaScript portion of the app.
2. react-mf Directory: Houses the React micro-frontend which interacts with the vanilla JavaScript part.

The architecture of the app can be checked at link here

Key Files and Their Roles

Root Directory

• index.html: This is the entry point of our app, setting up the HTML structure and including links to stylesheets and JavaScript files. It features two key div elements with id="app" and id="root", which are used to mount the vanilla JS app and the React micro-frontend, respectively.

• main.js: Acts as the main JavaScript file for initializing the vanilla JS part of the app. It handles the core logic and interacts with the shared state.

• counter.js: Contains the code responsible for dispatching actions to the Redux store. For instance, it dispatches an INCREMENT action to update the counter.

• store.js: Sets up the Redux store, which manages the application's state and ensures consistency between the vanilla JS and React parts of the app.

react-mf Directory

• App.jsx: The main React component of our micro-frontend. It utilizes the useState hook for local state management and subscribes to the Redux store to reflect the global state. It renders a button to dispatch an INCREMENT action and displays the current count from the store.

• main.jsx: The entry point for the React micro-frontend, where the React app is initialized and rendered.

You can find the full code in the GitHub repository.

The above is the detailed content of Sharing State Between Vanilla and React Apps with Redux. For more information, please follow other related articles on the PHP Chinese website!