页面刷新后的 Redux 状态管理

Question

我在最近的 angular 项目中使用 ngrx/store。但是我正在努力寻找一种更好的方法来在刷新任何页面后保持状态。我将我的 access_token 存储在商店中，因此当我刷新时它不会维护令牌并在没有令牌的情况下拦截发送它。这最终使它成为一个错误的请求。

怎么办？？非常感谢任何帮助。

此致，资深软件工程师

Answer 1

您应该在发出请求之前将令牌存储在商店中。因此，在访问应用程序组件之前，您应该在存储令牌的位置创建令牌解析器，以确保在发出请求之前令牌可用。

Answer 2

您必须将您的状态保存在例如浏览器的 localStorage 中。您可以通过使用 meta reducer 或效果来做到这一点。

还有一个名为 https://github.com/btroncone/ngrx-store-localstorage 的流行库可以执行此操作。

Answer 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 状态管理

Redux state management after refresh of page

store

redux

ngrx

angular