我想知道我是否可以在库中有一个 redux store 并且 App 也有一个 redux store

Question

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

两人都这样做：

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

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

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

我已经测试了其中的一些功能，但无法正常工作。就好像Redux先加载library Redux store 然后加载不出来App store 但是我是新手所以一定要问

Answer 1

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

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

Can I have a Reactjs Redux store in a library and then use that library in an App that also has a Redux store?

是的，有可能，使 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 创建您的应用程序（零配置）。它工作正常。

Will these two React Stores collide? Can they exist independently?

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

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

但是，总的来说，我不喜欢拥有多家商店，有关更多信息，请阅读

Can they share Reducers? (let's say the App want to use the library Redux store and send a dispatch to it )

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

我的看法：

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

Answer 2

是的，这是可能的。为了简单起见，库是完全独立的包，您可以在其中以正常方式使用 redux。当您将库的组件导出到外部世界时，以相同的方式导出您想要在使用该库的应用程序中使用的商店或分派。

Answer 3

Will these two React Stores collide? / Can they exist independently?

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

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

使用 react-redux Provider 组件时，您将使用 React 的上下文 API 将商店实例发送到组件树下。该实例将对呈现 Provider 的组件的所有子组件和后代组件可用。如果有另一个 Provider 挡道，该 Provider 的值将覆盖更高的 Provider。

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

Can they share Reducers?

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

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

我想知道我是否可以在库中有一个 redux store 并且 App 也有一个 redux store

I wonder if I can have a redux store in the library and the App also have a redux store

javascript

reactjs

redux

我的看法：