React Redux身份验证

问题描述:

我有以下情况,我有一个REST API和一个React + Redux应用程序。React Redux身份验证

当用户登录时,我将令牌保存到localStorage,基于此,如果用户回到页面,我使用令牌拨打服务器/api/whoami { token },然后验证令牌并返回用户详细信息,我将用它来更新我的Redux商店。

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

我该如何等待,直到完成对/api/whoami的请求并且设置了用户然后呈现我的应用程序?

这种问题还有其他解决方案吗?

谢谢!

您可以在您的情况下使用所谓的Aync动作,并在获取细节时显示加载组件。

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

运作:开始之前提取操作,调度和行动,其设置isLoadingtrue并且您已经收到您的回复后,你发送另一个动作将设置isLoading: false和你的显示器上只放如果isLoading是真实的你返回一个加载组件其他条件返回成型件

+0

我已经这样做了,但是如何等待请求完成呈现我的应用? – Anderson

+0

你最近的评论应该被添加到答案 – niceman

+0

在那里,我刚刚更新了我的答案。 – aditya

我想你知道react-redux和你所熟悉的像actionstorereducer一些概念。

如何我可以等到到/api/whoami请求被做了什么?

使用中间件redux-thunk[redux-saga][1] ...我建议你使用redux-saga,因为它是一个库,旨在使副作用(即异步之类的数据获取和不纯之类的东西访问浏览器缓存)在React/Redux应用程序中更容易和更好。

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

随着使用中间件,你可以请求运行时渲染加载视图和渲染你想要什么,当请求已经完成。

阅读redux-saga官方文档的更多信息和使用示例。