javascript - React-Redux 设计模式 : Should a "deep" component be wired to Redux, 或从父组件接收 props？

Question

我正在前端使用 React 和 Redux 构建一些即时消息应用程序。我有“Main”(初始化网络套接字并呈现其他组件)、“Chat”、“FriendsList”和“Friend”等组件

我经常发现自己想知道，我是否应该将 child 或孙子直接连接到 Redux(假设它需要它)，或者从 parent /祖 parent 传递这些 Prop 。

例如，我以这种方式在主组件中渲染“Chat”:

 <Chat
    onTyping={this.onTyping}
    onSubmitMessage={(value) => { this.submitMessage(value) }}
    messages={this.props.messages[this.props.activeFriend] || []}//This comes from Redux
    isMessagingAvailable={this.isMessagingAvailable()}    
  /> 

如您所见，我传递了一个“messages”属性，该属性又来自 Redux。我当然可以独立地将 Chat 连接到 Redux。

那么问题是，在这种情况下是否存在关于最佳实践的一些约定。 每个消耗全局状态的组件都应该直接连接到 Redux 吗？

Answer 1

TL;DR;

模块化设计背后的理念是拥有尽可能多的通用组件。

这些组件应该独立于外部世界(即 Redux Store)。

根据我的理解，任何应用程序的结构都应该是这样的:

• 您拥有满足其目的的根级组件。如:输入框
• 然后你就有了一个复合组件，它将使用这些根组件。就像处理错误标签和输入一样。
• 然后您就形成了高阶组件(HOC)。这些是业务组件，并且具有正在发生的事情的上下文。这些组件应该有权访问 Redux 存储。

---

示例:

让我们创建一个包含基本信息的表单:

• 名字
• 姓氏
• 年龄
• 电子邮件

对于这种形式，您需要以下组件:

• 文本输入组件
• 具有文本预防/验证逻辑的数字输入组件。

您可以将 textInput 用于 FirstName、lastName 和 email。因此，如果你直接将它绑定(bind)到 store，你就会使它依赖于你自己的 redux 结构。因此这些组件不能在其他地方使用。

因此，最好的想法是创建接受 props 并执行其操作的愚蠢组件。

---

您的用例。

您有以下模块:

• 主要
• 聊天
• 好友列表
• friend

将来，您计划添加更多模块:

• 人工智能/机器人聊天
• 群聊

现在个人、机器人和群聊的聊天窗口将是相似的，但商店结构将很困难。特别是对于群聊。

那么您如何决定应该绑定(bind)哪个组件来存储？

您应该为 View 创建嵌套组件层次结构，并为业务模块创建 HOC。这样，您的 View 组件就不依赖于商店。您的 HOC 将提供数据，这就是它的全部作用。

因此，就您而言，您将拥有以下 HOC:

• 直接聊天
• 机器人聊天
• 群聊
• 联系人
• 仪表板

您可以拥有以下 View 组件:

• 聊天组件:用于所有聊天类型。
• 联系人组件:用于好友列表/联系人 View
• 列表组件:用于浏览器联系人、添加成员 View 和管理成员 View 。