CODEWITHSUNDEEP
javascriptreactjstypescriptreduxkepler
user13101751
user13101751

Reputation:

use multiple stores in a single react project

In my react web app, I want to integrate kepler. The only tutorial that I found requires me to add redux. Since I already have a redux store and setup (for login/logout), I am unable to merge and integrate kepler into it.

https://www.youtube.com/watch?v=BEZjt08Myxs

const persistedReducer = persistReducer(persistConfig, rootReducer)

let store = createStore(persistedReducer);
let persistor = persistStore((store as unknown) as Store<any, AnyAction>);

let storeKepler = createStore(rootReducer, {}, applyMiddleware(taskMiddleware))

Since my original functionality is using a persistedReducer, which cannot be used here in this case, I tried to make another storeKepler for this task. However, now I am not sure how to use the second store in my App.tsx. I am using this currently:

<Provider store={store}>
      <PersistGate persistor={persistor}>

I have read that using multiple stores isn't a good idea. Then how else can I add Kepler into it? I have also created a sandbox:

https://codesandbox.io/s/kind-darkness-jzz97?file=/src/store/index.ts

Either way, I have tried adding multiple stores too but it starts throwing different typescript errors.

Upvotes: 2

Views: 881

Answers (1)

Pramod Mali
Pramod Mali

Reputation: 1808

There is a section in official docs, which discusses the same thing.

Can or should I create multiple stores? Can I import my store directly, and use it in components myself?

Upvotes: 0

Related Questions