Micro frontend react application - State Management using Redux - Data sharing

Question

React (Typescript & Redux & Webpack)

I'm developing a micro front-end application using react (typescript & redux & webpack)
But I'm seeing blockers in sharing the data between container app & child apps,

Above the planned structure, there roles based authorization

1. Teacher
   (Access to Teacher - Student Management App & Student - Academic Assessment && Teacher Registration App
2. Parents
   (Acccess to Parent Registration App && Student - Academic - Assessment
3. Student
   (Student Registration App && Student-Academic Assessment App)
   

Now, I'm seeing a blocker in sharing the redux-store data across child applications, i.e. when users log in from the login app, how to share the logged user information to child apps so that role-based access is implemented effectively, data is also to be shared.
Store should not be shared across apps.

Answer 1

Honestly, you are making things more complicated for yourself that it needs to be. To make some of that data available to each other, you will end up with multiple copies of the same data in different stores that has to be kept in sync.

Just share that store instead of coming up with a complicated scheme of making some application state available to some others and not others.

If you suddenly start accessing another sub-app's data, chances are you actually need that access. And then you will have to enable data sharing there again - which you could have from the beginning.

Another solution for this would be to add some code rules. A "human" solution, not a "technical" if you want to phrase it like that:

• one central store
• an app can only dispatch actions from it's own app
• one app's reducers can listen for actions from other apps (this is how app A could lead to a state change in app B if you need it)
• you only use selectors, no inline-written selectors
• keep all selectors in a central (but scoped) location for all apps to access, but add a linter rule to "forbid" import of certain scoped selectors to other apps. You can easily disable those rules for certain combinations to allow read-only cross-app access.