Question

我正在前端使用React和Redux构建一些即时消息应用程序。我有“ Main”（初始化Web套接字并渲染其他组件），“ Chat”，“ FriendsList”和“ Friend”之类的组件

我经常想知道是应该直接将一个孩子或孙子连线到Redux（假设需要），还是将这些道具从父母/祖父母那里传递出去。

例如，我通过以下方式在Main组件中渲染“聊天”：

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

如您所见，我正在传递“消息”道具，该道具又来自Redux。我当然可以将Chat单独连接到Redux。

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

Answer 1

TL; DR;

模块化设计的思想是拥有尽可能多的通用组件。

这些组件应该独立于外界（即Redux Store ）。

据我所知，任何应用程序的结构都应类似于：

您具有满足其用途的根级组件。像：input box
然后您有一个复合组件，它将使用这些根组件。就像处理错误标签和输入一样。
然后您将形成高阶组件（ HOC ）。这些是业务组件，具有发生情况的上下文。这些组件应有权访问Redux存储。

示例：

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

名字
姓氏
年龄
电子邮件

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

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

您可以将textInput用于FirstName，lastName和email。因此，如果直接将其绑定到存储，则将使其依赖于您自己的redux结构。因此，这些组件无法在其他任何地方使用。

因此，最好的主意是创建可接收道具并做事的哑巴组件。

您的用例。

您具有以下模块：

主要
聊天
好友列表
朋友

将来，您计划再添加几个模块：

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

现在，个人，漫游器和群组聊天的聊天窗口将相似，但是商店结构将变得困难。尤其是对于群聊。

那么您如何确定应该绑定哪个组件来存储？

您应该为视图创建嵌套的组件层次结构，并为业务模块创建HOC。这样，您的视图组件就不依赖于存储。您的HOC将提供数据，仅此而已。

因此，在您的情况下，您将具有以下HOC：

直接聊天
聊天室
群聊
联系人
仪表板

并且您可以具有以下视图组件：

聊天组件：用于所有聊天类型。
联系人组件：用于朋友列表/联系人视图
列出组件：用于浏览器联系，添加成员视图和管理成员视图。

Answer 2

Imho确实取决于情况：

1）如果Child组件独立使用数据，它将始终从全局状态树的同一分支中获取数据：我会将其连接到Redux。

总是从state.tasks获取任务列表的TaskList组件
CurrentUserDetail组件，该组件始终从state.currentUser获取用户信息

2）如果Child组件根据其父级消耗数据：我将通过props从父级获取数据。或者从父级那里获取有关如何从全局状态中获取数据的说明，然后将其连接到Redux并获取相应的数据：

一个Task组件，它从其父TaskList组件获取每个任务的任务数据
一个TaskList组件，该组件从其父级获取taskListID，然后获取相应的任务列表。例如：taskListID =“ Martin”-> state.tasks ['Martin']

React-Redux设计模式：应该将“深层”组件连接到Redux，还是从父组件接收道具？

2 个答案:

TL; DR;

示例：

您的用例。