javascript - React Redux 身份验证

Question

我有以下情况，我有一个 REST API 和一个 React+Redux 应用程序。

当用户登录时，我将 token 保存到 localStorage，基于此，如果用户返回页面，我会调用服务器 /api/whoami { token }使用 token ，我验证 token 并返回用户详细信息，我将使用这些详细信息更新我的 Redux 存储。

我的问题是，如果我刷新并且想在 componentDidMount 中执行某些操作，即使用户已登录 Redux 存储，但由于对 /api 的请求尚未更新，/whoami 尚未完成。

如何等到对 /api/whoami 的请求完成并设置用户，然后渲染我的应用程序？

对于此类问题还有其他解决方案吗？

谢谢!

Answer 1

您可以在您的案例中使用所谓的Aync 操作，并在获取详细信息时显示加载组件。

在这里您必须使用thunk 中间件。它位于一个名为 redux-thunk 的单独包中。当 Action 创建者返回一个函数时，该函数将由 Redux Thunk 中间件执行。详细阅读 here

功能:在开始获取操作、调度和将 isLoading 设置为 true 的操作之前，以及在收到响应之后调度另一个操作，该操作将设置 isLoading: false 并在您的显示屏上放置一个条件，即如果 isLoading 为 true，则返回加载组件，否则返回配置文件组件