我正在前端使用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？
模块化设计的思想是拥有尽可能多的通用组件。
这些组件应独立于外部世界（即Redux Store）。
以我的理解，任何应用程序的结构应类似于：
input box让我们创建一个包含基本信息的表单：
对于这种形式，您需要以下组件：
您可以使用textInput的FirstName，lastName和email。因此，如果直接将其绑定到存储，则将使其依赖于您自己的redux结构。因此，这些组件无法在其他任何地方使用。
因此，最好的主意是创建可以接受道具并完成任务的笨拙组件。
您具有以下模块：
将来，您计划添加更多模块：
现在，个人聊天，机器人聊天和群组聊天的聊天窗口将相似，但是商店结构将变得困难。尤其适用于群聊。
那么，您如何决定应该绑定哪个组件来存储？
您应该为视图创建嵌套的组件层次结构，并为业务模块创建HOC。这样，您的视图组件就不依赖于存储。您的HOC将提供数据，仅此而已。
因此，在您的情况下，您将具有以下HOC：
并且您可以具有以下视图组件：
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句