use multiple stores in a single react project

Question

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.

There is no harm in using multiple stores. It will a maintenance headache but I am not aware of any performance impact. — sibasishm, Aug 12 '20 at 10:19

score 0 · Answer 1 · answered Aug 12 '20 at 10:27

0

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?

answered Aug 12 '20 at 10:27

Pramod Mali

1,588
1
17
29

I have gone through this but it doesn't help me integrate Kepler as such. – Aug 12 '20 at 10:33
Yeah, it's mostly if and when one should consider for multiple stores. – Pramod Mali Aug 12 '20 at 10:35

use multiple stores in a single react project

1 Answers1