我将使用react和redux创建一个大型应用程序，并在第一次开始构建布局的标头组件。布局标题将包含4个子部分。
1。点击后会显示所有在线用户的图标
2。点击后会显示最新10条通知的图标
3. 将显示点击后收到的最新10条消息的图标
4. 登录用户名，该下拉按钮显示一些＆＃34;我的个人资料，退出，帐户设置＆＃34;导航链接。
我已经在很多地方读过有关redux的消息，我们必须尽可能减少有状态的组件。因此，通过记住这个概念，我想只有一个标题智能容器，标题状态包含所有图标的默认状态
{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]}。
因此，如果我遵循redux最佳实践并仅创建一个具有4个不同哑组件的智能标头容器，则每次更改其中任何一个的状态时，将重新呈现整个标头容器。 但是我想重新渲染状态改变的组件。
例如，如果我让用户通过websocket加入聊天，它将调度一个动作，reducer将更新该状态的headerOnlineUsers列表。但在这种情况下，我希望我的唯一在线用户组件可以重新渲染而不是整个标头容器。
任何人都可以建议我实施这种布局的最佳方法。
答案 0 :(得分：3)
我不会选择你的选择，但更愿意采用更细粒度的方法。
redux中的一般逻辑是分离数据敏感和非数据敏感。您的个人列表是数据敏感的，标题本身没有理由到目前为止。更重要的是，如果你想将动作附加到图标上，它会很快变得混乱，将动作带回标题然后再转移到容器中，如果你需要移动它们，甚至会更加混乱。
我这样做的方式（以及我现在的方式，因为我用反应和redux开发相当庞大的应用程序），将有一个商店包含这3个项目列表，然后是3个容器，一个对于将一个特定列表链接到组件的每个图标/下拉列表。
然后标题只是一个将所有容器放在一起的无状态函数。这样，如果您需要在其他地方移动一个按钮或重复使用它，您只需导入容器即可！
答案 1 :(得分：0)
React.js将只负责重新渲染所需内容。所以这个问题已经解决了： - ）
你打算做什么听起来对我来说是理智的，我只会改变一点：智能标头容器不应该使用内部状态。相反，您的redux商店应如下所示：
connect并且您应该将redux存储区传递到智能标头容器中（请参阅redux文档中的this.props函数）。这样，您可以通过(<(?!\s+class="goaway")[^>]*>[\w\n\s]*)(awesome)
在组件中使用redux商店内容，就是这样。