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

Question

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

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

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

谁能建议我应该做什么？

Answer 1

不要考虑一个组件导致另一个组件重新渲染。 在您的商店发生更改后，您的组件应该重新渲染。它也不应该知道是什么做出了改变。

有几种方法可以监听商店的变化，最流行的是react-redux。它将允许您将要重新渲染的组件包装在一个连接的容器中，该容器了解您的商店并依赖于它的一些数据。

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

1. <SignInForm /> 调度一个动作。
2. 您的一个 reducer 计算一个新状态。
3. 您的 <TopRightLoginBar /> 容器重新渲染。