[Question] How to implement multiple stores with redux-toolkit?

I’m working on a micro-front-ends architecture app, where one shell app will render multiple remote apps under single roof. I want to have an mf as a centralized redux store to which all the remote apps can connect to share common state. And remote apps should also have their own redux stores for their local states…

Here’s the issue… if central store and local store both have a state called count, updating this state in any of the stores, updates both of them, they behave as if it’s the exact same state.

I tried changing the store names… like centralStore and localStore, it didn’t have any effect. I tried changing the slice name… then the nearest store worked and the other store stopped working…

in the following example, localStore works… and the centralStore stops working.

function CentralStoreProvider({children}) {
    return <Provider store={centralStore}>{children}<Provider />
}

// app.js
<CentralStoreProvider>
    <Provider store={localStore}>
        <App />
    <Provider />
<CentralStoreProvider>

[phryneas]

Generally, you can have multiple stores with different contexts and different hooks. This is described in custom context. But if you can avoid it, avoid id.

[SurjitSahoo]

Generally, you can have multiple stores with different contexts and different hooks. This is described in custom context. But if you can avoid it, avoid id.

Thanks… It solved my issue…

Basically, I want to have a way to share some common states across mf apps, without having any side-efect on those apps, if they need something, they can just import it from central-store… they don’t even need to know is it redux or something else.

Thanks again …