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
运作:开始之前提取操作,调度和行动,其设置isLoading
到true
并且您已经收到您的回复后,你发送另一个动作将设置isLoading: false
和你的显示器上只放如果isLoading是真实的你返回一个加载组件其他条件返回成型件
我想你知道react-redux
和你所熟悉的像action
,store
,reducer
一些概念。
如何我可以等到到
/api/whoami
请求被做了什么?
使用中间件像redux-thunk
,[redux-saga][1]
...我建议你使用redux-saga
,因为它是一个库,旨在使副作用(即异步之类的数据获取和不纯之类的东西访问浏览器缓存)在React/Redux应用程序中更容易和更好。
如何设置用户然后呈现我的应用程序?
随着使用中间件,你可以请求运行时渲染加载视图和渲染你想要什么,当请求已经完成。
阅读redux-saga
官方文档的更多信息和使用示例。
我已经这样做了,但是如何等待请求完成呈现我的应用? – Anderson
你最近的评论应该被添加到答案 – niceman
在那里,我刚刚更新了我的答案。 – aditya