将 Redux 存储开发为 React 应用程序的单独 NPM 模块答案

【问题标题】：Developing a Redux store as a seperate NPM module for a React App将 Redux 存储开发为 React 应用程序的单独 NPM 模块
【发布时间】：2018-07-04 20:58:52
【问题描述】：

是否可以为 React App 开发 Redux Store 作为单独的 npm 包，然后 import 在反应应用

例如：我有一个名为 reactapp 的假设 React 项目。

我开发了一个名为 reactapp-reduxstore 的包，其中包含 Redux Store，它是 Actions 和 Reducers

现在，我将reactapp-reduxstore 导入到我的reactapp 项目中

// other imports

import { store } from 'reactapp-reduxstore'

const ReactApp = () => (
<Provider store={store}>
    // React App Components
<Provider/>
)

// Mount ReactApp to DOM

现在，如果我想使用 redux 商店包 中的 actions，我将操作导入到组件中。

import { addUser } from "reactapp-reduxstore/users"

// Use the action in my Component

我只是想知道，这种结构对于 React 项目的可行性如何，这样我以后就不会遇到 代码管理 问题。

注意：为简洁起见，不包括所有通用代码。

更新：这是我对上述redux 使用经验的更新。你不应该那样做。管理redux 变成了一项艰巨的工作。 IMO，仅在真正需要时使用redux。否则，React 组件状态足以管理组件的状态。

【问题讨论】：

曾经我将我的同构 mobx spa 应用程序分成 5 个包：客户端、服务器、存储、数据库和模式。天哪，真是头疼！不会推荐给任何人。顺便说一句，这可能对测试 redux 商店有用：github.com/iamdanthedev/describe-redux
他们正坐在一个私有的 npm 注册表上，我不得不在 docker 中运行它......太麻烦了
@DanielKhoroshko 我想开发我的 redux 存储隔离，以便我可以更轻松地对其进行测试。我确实明白，如果我必须更改项目的特定功能，那么我将需要管理多个包。但从测试 POV 来看，是否可行？
我的通用组件在不同的包中......这真是个坏主意，我花费大量时间来更新包以进行每次更改。我建议将所有内容放在一个包中，并在需要时拆分公共代码。
谢谢大家的建议。我现在明白你们都想说什么了。

标签： javascript reactjs npm redux modularity

【解决方案1】：

嗯，你的应用和它的状态是紧密耦合的。当您更新一个时，在大多数情况下您需要更新另一个。因此，每次修复错误或开发新内容时，您都必须更新和发布 2 个 NPM 包，而不是一个。

所以我想只有在多个应用程序中需要完全相同的 store、actions 和 reducer 时我才会这样做。否则，我看不到将应用程序状态移动到另一个包中的任何好处。似乎很多痛苦的额外工作没有真正的好处。

【讨论】：

如果我想以更模块化的方式开发我的应用程序怎么办。如果我想单独测试我的 redux 商店并希望我的 React 应用程序代码更干净。
那为什么不呢，但正如我所说，很多额外的工作并没有真正的好处。您可以使您的代码模块化和干净，而无需将代码拆分到不同的 NPM 包中。只需在项目中使用不同的文件夹和文件并导入/导出它们。
如果您要制作一个与您的 web 应用程序非常匹配的 react native 应用程序，那么您可能希望共享一些 redux 业务逻辑并且拥有一个单独的包可能是有意义的。使用 lerna (github.com/lerna/lerna) 在 monorepo 中管理你的包也可以减少多个包管理的开销。如果我还不需要共享代码，我永远不会采用这种方法。如果以后确实需要，事后分开并不难。

【解决方案2】：

我在这种代码结构中看到了一些好处，我确实在这里看到了一些很好的好处，如果您在 react native 中有相同的应用程序副本，这是更好的结构之一，并且在捆绑时有一些真正的好处你的项目也是如此，如果你的 redux 数据非常特定于你的应用程序，并且如果你想保护它，你也可以捆绑它。而不是公开 API 调用。编码愉快！

【讨论】：