使用react redux子应用程序？

我有一个关于是否使用子应用程序方法的一般性问题

目前，我们正在开发一个通用列表/详细视图。 对于列表视图，我们使用redux saga检索数据，并将其保存到redux存储，然后将其连接到列表组件。在分页/搜索时，我们触发刷新这些数据的操作。 一个要求是，详细视图可以包含相关记录（子列表）的列表视图。 根列表视图和子列表在视觉上几乎相同，只是搜索表单在默认情况下不应可见，并且操作应不同（仅检索相关数据，行单击不应显示子列表中的详细信息…）

为了解决这个问题，我可以想出两种解决方案：

-1-重用组件，共享存储

我们可以重用列表视图容器。由于子列表的数量是动态的，我们必须在存储区中存储id为的数据。在分页等方面，我们必须替换正确的数据集。垃圾收集必须手动处理。

-2-子应用程序方法

如本文所述：我们可以创建详细信息/列表视图的独立组件。如果我们想要一个子网格，我们只需要包含这个组件。这与我们在根列表视图中使用的相同。

赞成/反对意见

对于subapp，我看到自治的优势。数据可以保存在单独的存储中，我们不必在存储中实现“基于id”的东西。我们可以销毁子应用程序，并删除存储。 另一方面，一些数据是在根级别上检索的，因为我们不希望子应用程序执行相同的REST调用来获取这些数据，我们需要找到一种方法将这些信息发送到子应用程序。行单击可能会影响根视图（重定向） 因此，子应用程序需要发送数据并获取根元素的数据，因此不像我希望的那样孤立

是否有人对任何方法都有宝贵的经验？任何反馈都将不胜感激

经验： 在我工作的地方，我们有两个大型web应用程序，它们共享一些功能。它们由11个不同的团队开发，跨越4个地理位置

我们决定将这些站点分解为逻辑子应用程序（译名），由一个团队负责开发。因此，尽可能地与父应用程序分离对我们来说很重要（redux通常会帮助记录这一点）

两个网站都会使用一些子应用程序，这使得自主性成为一个巨大的问题（不能保证父应用程序会以相同的组合构建商店，我们也不想强制执行它们）

其他一些子应用不需要同时出现在两个站点中，但需要在同一站点上的多个位置显示，数据不同（与您的情况类似）

大多数子应用程序还必须在父应用程序选择的上下文中显示其数据，或使用登录的安全令牌进行API请求，因此能够访问根存储也很重要

我们还想通过redux中间件捕获分析和日志记录，因此拥有一个单一的商店来连接所有这些对我们来说也是一个好处

正如你现在可能知道的，我们想要两种方法的所有好处，因此我们创造了一个“为什么不能两者兼顾”的哲学

最后，我们使用它不仅实现了上面列出的所有目标，而且我们还开始进一步细分子应用程序，让子应用程序由多个子应用程序组成，以进一步隔离特定功能

---

Redux子空间 核心概念是拥有一个单一的商店，但为你的子应用程序创建独立的部分（子空间）。也有用于值的功能

所以你可以做一些像

<Provider store={store}>
    <SubspaceProvider mapState={(state) => state.list1}>
        <ListView />
    </SubspaceProvider>
    <SubspaceProvider mapState={(state) => state.list2}>
        <ListView />
    </SubspaceProvider>
</Provider>

后子空间

const mapStateToProps = state => {
    return {
        myList: state.items
        rootValue: state.root.rootValue,
    }
}

注意：有一个用于操作的函数，但不支持redux sagas（）。不过，它可以为从子空间中调度的操作命名名称空间，因此这可能是您的问题，也可能不是（取决于应用程序的实现细节）

---

免责声明：我是redux子空间的主要贡献者。

听起来很有趣，非常感谢！希望我明天能多踢一会儿，看看这双鞋是否合脚。有什么特别的原因可以解释为什么自今年1月以来就没有承诺？它一直稳定并为我们工作，所以没有必要改变：）。唯一悬而未决的问题涉及改进的文档（没有人有时间去做）和sagas支持（我们没有人有过这方面的经验-如果您了解更多，请随意提交拉请求），在所有示例中，您都添加了静态数量的减速机（）。不幸的是，我的“子空间”是动态的，依赖于运行时加载的定义。你有这样的例子吗？在本例中，我认为我们可以在运行时以列表形式添加还原器。但另一方面，引入ID和只添加1个Reducer可能更容易解决动态Reducer是一个不同的问题（我目前正在为我的公司开发一个库，我们计划很快开放源代码，但它还没有完全准备好）。一旦你有了动态减缩器，子空间也可以用同样的方式使用，但是你需要先把它分类。从丹·阿布拉莫夫（我的新图书馆就是以它为基础的）那里了解一些想法。

const mapStateToProps = state => {
    return {
        myList: state.items
        rootValue: state.root.rootValue,
    }
}