我想知道我是否可以在图书馆里有一个 redux 商店，并且 App 也有一个 redux 商店答案

【问题标题】：I wonder if I can have a redux store in the library and the App also have a redux store我想知道我是否可以在图书馆里有一个 redux 商店，并且 App 也有一个 redux 商店
【发布时间】：2021-12-22 03:43:31
【问题描述】：

我真的是 React 新手，需要问一下。我可以在库中有一个 ReactJs Redux store，然后在也有 Redux 商店的应用程序中使用该库吗？

他们都这样做：

    <Provider store={store}>
       ..App
    </Provider>

我学习了 ReactJs，但不确定我是否理解 Webpack 是如何在此处加载代码的。

这两个 React Store 会发生冲突吗？
它们可以独立存在吗？
他们可以共享减速器吗？（假设应用想要使用库 Redux 存储并向其发送调度）

我已经测试了其中的一些，但无法使其工作。就像 Redux 在第一次加载库 Redux store 之后无法加载 App store 但我是新手所以必须问

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

这两个 React Store 会发生冲突吗？ / 它们可以独立存在吗？

使用createStore创建的两个不同的store不会冲突，可以独立存在。

在幕后，每个商店实例都有一个订阅方法，以及它自己的订阅者数组。

当使用 react-redux Provider 组件时，您将使用 React 的上下文 API 将 store 的实例发送到组件树的下方。该实例将可供渲染提供者的组件的所有子级和死者使用。如果有另一个 Provider 挡道，该 Provider 的值将覆盖更高的 Provider。

因此，如果您将另一个 Provider 与库中的另一个商店实例一起使用，它将仅对从您的库组件开始的组件树生效。使用正确的构图，就不会发生碰撞。

他们可以共享 Reducer 吗？

reducer 只是纯函数，这意味着它们不应该有任何副作用。因此，您可以根据需要导出和重用相同的 reducer 逻辑，您只需将它们注册到每个商店实例即可。

最后，我不同意此处声称您不应该使用多个商店的其他答案。您有一个确切的用例，其中一个单独的存储是合理的，您的主应用程序使用一个存储，并且您有一个使用另一个不相关的全局状态的独立库。

【讨论】：

如果您需要在商店之间共享减速器，这可能是一个危险信号，从长远来看，您最好使用一个商店。否则，您可能会遇到需要在商店之间同步数据的情况。
@DavidBradshaw 听起来很奇怪，但我想一个实用程序类型库可以证明在两个商店之间共享一个减速器是合理的......你需要一个非常具体的用例，但这是可能的！

【解决方案2】：

在我看来，在编程世界中一切皆有可能，当然，拥有多商店也是可能的。

你问了几个问题，我先回答，然后再解释一下。

我可以在库中拥有一个 Reactjs Redux 存储，然后在也有 Redux 存储的应用中使用该库吗？

是的，有可能，使Redux 易于使用的著名库是Redux Toolkit，它具有非常易于在您的应用程序中使用和实现的流程，即使它有一个您可以创建应用程序的 CRA 模板（零配置）基于 redux npx create-react-app [my-app-name] --template redux 或 redux-typescript npx create-react-app my-app --template redux-typescript。它工作正常。

这两个 React Store 会发生冲突吗？它们能独立存在吗？

不，它们不会发生冲突，因为每个商店（不管它是 redux、mobx 还是其他）都有一个 Provider，您应该使用该 <Provider store={store}> 包装您的应用程序的一部分或整个应用程序，所以如果你想拥有两个商店，你可以添加两个Providers，它们不会发生冲突。但是，在连接并从商店获取一些数据时，您应该注意您将从哪个 Provider 调用。所以它们将能够独立存在。

<ReduxOneProvider store={storeOne}>
  <ReduxTwoProvider store={storeTwo}>
    <MobxProvider store={mobXStore}>
     <App>
    </MobxProvider>
  </ReduxTWoProvider>
</ReduxOneProvider>

但是，我完全不喜欢拥有多店，更多信息请阅读here

他们可以共享减速器吗？（假设 App 想要使用库 Redux 存储并向其发送调度）

是的，你知道，reducer 函数是单独的纯函数，位于一个文件夹中，当你想建立你的商店时，你应该收集这些函数和combine 他们，所以，答案是肯定的，但请考虑，来自react-redux 的connect 函数需要两个函数，mapStateToProps 和mapDispatchToProps，在第二个函数中，您可以使用dispatch 函数调用reducer。所以您将在所有商店中重新渲染。

我的看法：

请避免拥有多个商店，即使拥有并处理它也会使项目有点难以维护。你想如何处理多。它使问题变得复杂。

【讨论】：

嗯，我收到此错误，即无法读取 App Redux 存储状态。在库中，当我执行 <Provider store={store}> 时，即使在 <Provider store={store}> 中执行相同操作，也无法访问 App Store应用程序.. 我使用 yalc 并执行 yalc publish 在 VSCode 中添加库，也许这就是它不工作的原因不确定
@TordLarsen，我没明白你的意思，你有两个 Redux？ on 在你的图书馆里吗？并且在实际项目中，对吗？您如何创建库（例如：我正在使用 TSDX 创建库）？你懂的！你应该在你的实际项目中实现 2 个 Redux 配置，成功后，将其中一个移动到你的库中。但是亲爱的兄弟，最终，您的解决方案一点也不好。使用 props 接收数据并在实际项目中使用 Redux，我根本无法理解有两个状态管理。

【解决方案3】：

是的，这是可能的。为了简单起见，库是完全独立的包，您可以在其中以正常方式使用 redux。当您将库的组件导出到外部世界时，以同样的方式导出您希望在使用该库的应用程序中使用的存储或调度。

【讨论】：