反应Redux认证

Question

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

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

我的问题是，如果刷新并且我想在componentDidMount做某事，即使用户登录Redux存储区尚未更新，因为对/api/whoami的请求尚未完成。

我怎样才能等到对/api/whoami的请求完成并且设置了用户然后呈现我的应用程序？

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

谢谢！

Answer 1

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

在这里，您将不得不使用笨拙的中间件 。 它包含在一个单独的名为redux-thunk软件包中。 当动作创建者返回一个函数时，该函数将由Redux Thunk中间件执行。 在这里详细阅读

运行功能：在开始进行提取操作之前，将isLoading设置为true分派和操作，在收到响应后，您将分派另一个将isLoading: false设置为isLoading: false并且在显示中仅提出以下条件：如果isLoading为true返回加载组件，否则返回配置文件组件

Answer 2

我想您知道react-redux并且熟悉一些概念，例如action ， store和reducer 。

如何等待/api/whoami的请求完成？

使用redux-thunk ， [redux-saga][1]类的中间件 ...我建议您使用redux-saga因为它是一个旨在产生副作用的库（例如，异步事物（如数据获取和不纯净的事物，如访问）浏览器缓存）在React / Redux应用程序中变得越来越容易。

如何设置用户然后呈现我的应用程序？

通过使用中间件 ，您可以在请求运行时呈现加载视图，并在请求完成后呈现所需的内容。

阅读redux-saga官方文档了解更多信息和用法示例。