reactjs - 如何告诉“远程”组件重新渲染？

Question

在我的网络应用程序的右上角，如果用户当前已登录，则显示用户名，如果没有，则显示“未登录”。通过检查redux中的密钥，该组件获取有关登录状态的用户的信息。

用户通过访问登录表单登录。登录表单和右上角栏登录状态是非常独立的组件，都在reactjs组件层次结构的不同分支的深处。

一旦用户通过登录表单成功登录，我无法理解如何让右上角栏登录状态重新呈现。

有人可以建议我应该做什么吗？

Answer 1

不要考虑一个组件导致另一个组件重新渲染。您的组件应在商店更改后重新呈现 。它不应该知道是什么造成了改变。

有几种方法可以监听商店中的更改，最受欢迎的是react-redux。它允许您将要重新呈现的组件包装在连接容器中，该容器知道您的商店并依赖于它的某些数据。

当容器关心的数据片段发生变化时，它会重新渲染其内部的React组件。

1. <SignInForm />发送行动。
2. 你的一个减速器计算一个新状态。
3. 您的<TopRightLoginBar />容器重新呈现。