Redux Architecture for Modular React Applications in a Monorepo.

[Siran5]

Summary

I’m working on an application that consists of multiple independent sub-modules. Each sub-modules is a separate package/repo within the monorepo. To manage reusable components across these modules, I’ve created a separate repository called shared-components. The application is built using React and Vite.

For state management, I’m using Redux. I want to establish an architecture where there's a global store accessible by all modules. Given this setup, should I implement a single global Redux store for the entire application, or would it be better to maintain separate Redux stores for each module within the monorepo?

What kind of architecture would you recommend in this scenario?

Additional information

This is just a simplified example of my application.

├── apps/
│   ├── app-a/          # React app A 
│   └── app-b/          # React app B
├── packages/
│   └── ui/             # Shared UI components (Button, Card, Input)
├── package.json        # Root package.json with workspaces
└── turbo.json          # Turborepo configuration

Example

No response

[anthonyshew]

Each application gets its own instance of the Redux store at runtime, meaning you can't create a single store across applications. While you can share Redux code across the applications, its important to note that you can't guarantee that they will be holding the same data while the application is running.

You likely want to look into different methods for holding state, like URL query params, persisting the data into a database, or localstorage in the browser.

[Siran5]

Thanks for your thoughts @anthonyshew