页面刷新后的 Redux 状态管理
Posted
技术标签:
【中文标题】页面刷新后的 Redux 状态管理【英文标题】:Redux state management after refresh of page 【发布时间】:2019-01-20 23:51:23 【问题描述】:我在我最新的 Angular 项目中使用了 ngrx/store。但是我正在努力寻找一种更好的方法来在刷新任何页面后维护状态。我将我的 access_token 存储在商店中,因此当我刷新时它不会维护令牌并拦截发送它而不使用令牌。这最终使它成为一个错误的请求。
怎么办??非常感谢任何帮助。
问候, 资深软件工程师
【问题讨论】:
【参考方案1】:您应该在发出请求之前将令牌存储在 Store 中。因此,您应该在访问应用程序组件之前创建令牌解析器,将令牌存储在 Store 中,这样可以确保在发出请求之前令牌可用。
【讨论】:
【参考方案2】:您必须将您的状态保存在例如浏览器的 localStorage 中。 您可以通过使用元减速器或效果来做到这一点。
还有一个名为https://github.com/btroncone/ngrx-store-localstorage 的流行库可以做到这一点。
【讨论】:
【参考方案3】:NGRX 状态仅保存在内存中。如果您希望它在页面刷新之间持续存在,请使用 LocalStorage 或 sessionStorage。
对于 Angular 5:
npm install @ngx-pwa/local-storage@5
在您的 RootModule 中注册
import LocalStorageModule from '@ngx-pwa/local-storage';
@NgModule(
imports: [
BrowserModule,
LocalStorageModule,
...
]
注入并使用
import LocalStorage from '@ngx-pwa/local-storage';
@Injectable()
export class YourService
constructor(protected localStorage: LocalStorage)
用法
let user: User = firstName: 'Henri', lastName: 'Bergson' ;
this.localStorage.setItem('user', user).subscribe(() => );
注意:window 的 LocalStorage 和 @ngx-pwa LocalStorage 的区别在于,数据在 DEV 工具中是不可见的。
【讨论】:
以上是关于页面刷新后的 Redux 状态管理的主要内容,如果未能解决你的问题,请参考以下文章