React / Redux 主题：基于 Store State 的条件渲染

Posted 2023-02-22

【中文标题】React / Redux 主题：基于 Store State 的条件渲染

【英文标题】：React / Redux Topic: Conditional Rendering based on Store State

【发布时间】：2021-08-16 01:16:15

【问题描述】：

前言：

这是我项目中的一种身份验证机制。 我正在重构从使用 Contexts 到 Redux 来控制状态

Redux 存储将“isLogged”作为布尔值作为状态的一部分。成功登录后（用户使用正确的电子邮件和密码提交表单），axios 响应会验证用户，并且客户端会发送状态更改的操作。根据我使用 redux 开发工具扩展所看到的情况，状态更改成功发生。

问题：

我有一个导航栏组件，它根据 isLogged 状态有条件地呈现链接公共和私有组件。它只是在商店状态更新时不会重新呈现，因此当前用户无法看到更新后的导航栏，即使状态发生了应有的变化。

提前感谢您的帮助。

【问题讨论】：

提供一些代码，以便有人可以调试它并找出问题所在。

您可能需要将 Navbar 组件连接到 redux，您能否分享初始状态和 Navbar 代码

【参考方案1】：

我刚刚解决了这个问题。

我必须通过“react-redux”中的 useSelector 钩子访问商店状态。似乎当我尝试使用 store.getState() 方法获取状态并将其存储在变量中并通过 props 传递时，函数组件没有监听更新。