reactjs - Redux - 当两个组件共享相同的初始数据加载方法时

Question

我在使用 Redux 和 React 时多次遇到过这个问题，因为我是新手，我有点好奇“最佳实践”或解决此问题的良好替代方案问题是。

一个很好的例子是，我们正在加载某些“组”的页面 View 。一个群组可以有 - 例如 - 横幅、侧边栏(有关群组的信息)、群组帖子等。显然我们可以将这些解耦，groupPosts 是它们自己的容器......但是群组侧边栏和群组横幅又如何呢？ ？我们是否要使用两个 AJAX 调用来获取有关该组的相同分类信息，如下所示:

• 一次 AJAX 调用可能会获取群组横幅、头像和名称
• 另一个 AJAX 调用来获取组信息、描述等。

这看起来相当浪费，特别是(在我的情况下，我确信在其他情况下)当API中的端点相同时，即获取组数据(banner，名称、date_founded、其他元数据等)需要查询webapp.com/php/group/group_id，所以实际上是组件GroupBanner 和 GroupSidebar 两次查询同一个端点，并且只使用部分数据，如果我们只查询一次并发送 banner ，效率会更高信息发送到 GroupBanner 组件，然后我们将其余部分发送到 GroupSidebar 组件。这允许表示某些父容器GroupMetadataContainer从/php/group/group_id获取元数据，并负责将所需的任何内容发送到GroupBanner和GroupSidebar。但随后我们在 View 逻辑中遇到了麻烦，因为它们的渲染方法必须是单个根，因此 groupPosts 无法像这样相应地定位:

------------------------------------
|         Group Banner             |
------------------------------------
|         ||                       |
|         ||                       |
| SideBar ||    Group Posts        |
|         ||                       |
|         ||                       |

通过为 GroupBanner 和 GroupSidebar 声明一个更大的“容器”，它们的渲染方法将作为一个笨拙的大型组件提供:

------------------------------------
|         Group Banner             |
------------------------------------
|         |
|         |
| SideBar |
|         |
|         |

另一种方法是让它们每个人都调用相同的方法 this.fetchGroup()，然后如果之前在当前上下文中调用过该方法，则只需做一个标记，这意味着以下任一方法GroupBanner 或 GroupSidebar 已经调用了它，我们只需等待数据进入并相应地给出它，从而避免两次 AJAX 调用。然而，这似乎不太可扩展，它将它们的逻辑组合在一起，并且我确信我缺少一种更复杂的方式，或者我的结构存在固有问题。我们如何解耦这些共享数据的组件的“数据负载”而不与其他事物纠缠在一起(或者其他人如何克服这个问题)？

Answer 1

如果您想减少 api 调用，您可以将 fetch 移至页面级别(或组级别)。 然后在reducers中你可以处理相同的action.type，或者你可以为每个reducer分派(dispatch)2个成功操作。

它不应该出现渲染问题，因为对于该方法，您只需从 Group Banner 和 GroupSidebar 中删除 fetch 的调用，然后将其移动到页面(或组级别)并将调用 fetch 放置在 componentDidMount 中。

我假设您使用react-router和named components

您不需要仅用于横幅和侧边栏的特殊“GroupMetadataContainer”，您可以轻松地在一个容器中完成它。