在单个 React 项目中使用多个商店答案

【问题标题】：use multiple stores in a single react project在单个 React 项目中使用多个商店
【发布时间】：2020-12-02 01:40:46
【问题描述】：

在我的 react web 应用程序中，我想集成开普勒。我发现的唯一教程要求我添加 redux。由于我已经有一个 redux 存储和设置（用于登录/注销），我无法将 kepler 合并和集成到其中。

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))

由于我的原始功能是使用persistedReducer，在这种情况下无法在此处使用，因此我尝试为该任务制作另一个storeKepler。但是，现在我不确定如何使用 App.tsx 中的第二个商店。我目前正在使用这个：

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

我已经读到使用多个商店不是一个好主意。那么我还能如何将开普勒添加到其中？我还创建了一个沙盒：

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

无论哪种方式，我也尝试过添加多个商店，但它开始引发不同的打字错误。

【问题讨论】：

使用多个商店没有坏处。这将是一个令人头疼的维护问题，但我不知道有任何性能影响。

标签： javascript reactjs typescript redux kepler

【解决方案1】：

官方文档中有一个部分讨论了同样的事情。

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

【讨论】：

我已经完成了这个，但这并不能帮助我集成开普勒。
是的，这主要是考虑是否以及何时应该考虑开设多家商店。