使用 react-redux 子应用？

Posted 2023-02-22

【中文标题】使用 react-redux 子应用？

【英文标题】：Use react-redux sub-apps?

【发布时间】：2017-09-06 14:26:56

【问题描述】：

我有一个通用的架构 react-redux 问题是否使用子应用方法。

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

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

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

我们可以重用 list-view 容器。使用动态数量的子列表，我们必须在商店中存储带有 id 的数据。在分页等时，我们必须替换正确的数据集。垃圾收集必须手动处理。

-2- 子方法

如此处所述：Isolated Subapps 我们可以创建详细信息/列表视图的隔离组件。如果我们想要一个子网格，我们只需包含这个组件。这与我们用于根list-view 的相同。

优点/缺点

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

有没有人用任何方法获得了一些宝贵的经验？任何反馈将不胜感激！

【参考方案1】：

经验：

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

我们决定将网站分解为逻辑子应用（称为"micro-frontends"），由一个团队负责开发。因此，尽可能与父应用解耦对我们来说很重要（redux 通常会帮助记录日志）。

一些子应用会在两个站点中使用，这使得自治成为一个大问题（不能保证父应用会以相同的组合构建商店，我们不想强制它们必须）。

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

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

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

您现在可能已经知道，我们想要这两种方法的所有好处，因此我们创建了redux-subspace，并提出“为什么不两者兼而有之？”哲学。

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

---

Redux-子空间

核心概念是拥有一个单独的商店，但为您的子应用创建独立的部分（子空间）。还有accessing the root store 值的功能。

所以你可以做类似的事情

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

其中list1 和list2 是存储中两个不同数据集的位置。

关于ListView 组件的主要注意事项是它现在应该映射其状态，就好像提供的节点是存储的根一样，并通过root 节点访问根值。

例如

子空间之前：

const mapStateToProps = state => 
    return 
        myList: state.list1.items
        rootValue: state.rootValue,
    

子空间之后

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

注意： 有一个 namespacing feature 用于操作，但不支持 redux-sagas (yet)。不过，它可以命名从子空间内调度的操作，因此这对您来说可能是也可能不是问题（取决于您的应用的实现细节）。

免责声明：我是 redux-subspace 的主要贡献者。

【讨论】：

听起来很有趣，非常感谢！希望我明天可以玩一会儿，看看鞋子是否合脚。自今年 1 月以来没有提交的任何特殊原因？

它一直很稳定并且为我们工作，所以不需要改变它:)。唯一未解决的问题涉及改进的文档（没有人有时间）和 sagas 支持（我们都没有经验 - 如果您了解更多，请随时提交拉取请求）

在所有示例中，您都添加了静态数量的 reducer (github.com/ioof-holdings/redux-subspace/blob/master/examples/…)。不幸的是，我的“子空间”是动态的，并且取决于运行时加载的定义。你有一个例子吗？在这种情况下，我认为我们在运行时以列表形式添加减速器。但另一方面，引入 ID 并且只添加 1 个 reducer 可能更容易

动态减速器是另一个需要解决的问题（我目前正在为我的公司开发一个库，我们计划很快将其开源，但还没有完全准备好）。一旦有了动态减速器，就可以以相同的方式使用子空间，但您需要先对其进行排序。查看 Dan Abramov 的 this answer（我的新库是基于它的）的一些想法。