Redux Architecture for Modular React Applications in a Monorepo

Help
1

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?

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

5

For those. who might end up here in the future, just add a new package folder and you can called it “redux”. It should have its own package.json.

Within this “redux” package folder, initiate your store and load the required modules with reducers.

Next, create a Provider component that you’ll use to wrap your application at the root level, so that your store is easily available throughout your entire application, UI components, widgets, etc.

Easy work

1 Like