ngrx商店是否持久存在?

时间:2018-02-28 20:22:13

标签: javascript angular ngrx

ngrx商店是否持久存在?换句话说,我们可以关闭浏览器重新打开它,并检索添加到ngrx store的状态吗?

3 个答案:

答案 0 :(得分:6)

当前ngrx / store不支持此类功能。但是您可以通过使用ngrx-store-persist之类的库来将状态保存到浏览器indexDB,localStorage或WebStorage来维护状态。该库自动保存和恢复ngrx / store的数据。您只需要添加要存储在配置中的redux键(请参阅“用法”部分)。

答案 1 :(得分:2)

您可以使用像idb.js这样的库来维护状态,以便将数据保存到浏览器indexDB,然后通过使用ngrx效果,您可以使用init效果在webapp加载时重新加载状态。这是一个示例代码,假设我想重新加载所选语言。效果将是:

 @Effect()
  init$: Observable<Action> = defer(() => {
    return from(storageDb.readData('app', Lang.ActionType.LANG_KEY)).pipe(
      map((data: any) => {
        const tmpData = data ? data.state : {dir: 'rtl', selected: 'ar'};
        this.translate.setDefaultLang(tmpData.selected);
        return new Lang.LanguageInit(tmpData);
      })
    );
  });

storageDb.readData是idb按键加载数据的包装器,效果将在加载效果时启动,它将从indexdb获取数据,如果找不到任何设置默认值,则调度一个Action 。 ngrx最佳实践是使用promise而不是reducers,因为加载数据是异步操作,然后在你的状态reducer中你可以像这样捕获Action:

case lang.ActionType.LANGUAGE_INIT: {
      return {...state, ...action.payload};
}

以这种方式使用它可以将状态切片保存并加载它们即使在延迟加载时也是如此。

答案 2 :(得分:0)

nrxg/store仅在内存中。可以使用像pouchdb ngrx/effects这样的浏览器来管理状态。 More here