在 angular/ngrx 应用程序中将状态保存到本地存储的逻辑的位置

Posted 2023-02-19

【中文标题】在 angular/ngrx 应用程序中将状态保存到本地存储的逻辑的位置

【英文标题】：Where in angular/ngrx application to put logic for saving state to local storage

【发布时间】：2018-07-18 21:25:31

【问题描述】：

我有一个使用 @ngrx 进行状态管理的 Angular 应用程序。在这个应用程序中，我有一个逻辑，它订阅状态的某些视图，并在它们发生变化时将它们保存到本地存储中。该代码按预期工作，但我目前将它放在我的应用程序组件中，这似乎是它的错误位置。有人可以建议放置此逻辑的最佳位置吗？

import  Component  from '@angular/core';
import  Observable  from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';
import  Store  from '@ngrx/store';

import * as fromRoot from './state-management/reducers';

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
)
export class AppComponent 
    constructor(
        private store: Store<fromRoot.State>,
    )
        // Persist the user, with things to local storage
        Observable.combineLatest(
            store.select(fromRoot.getAuthUser),
            store.select(fromRoot.getThings),
            (user, things) => 
                return ...user, things: things;
            
        ).subscribe(user => 
            let oldUser = JSON.parse(localStorage.getItem('currentUser'));
            localStorage.setItem('currentUser', JSON.stringify(...oldUser, user: user));
        );
    

【问题讨论】：

你有没有想过添加github.com/btroncone/ngrx-store-localstorage我们已经成功使用它来持久化应用刷新时的数据:)

@Alex 我简要地看了一下，但引入一个新库来替换大约 12 行代码似乎有点过头了。

啊，当然。如果你只需要它几行，那是可以理解的:)

您可以使用角度 APP_INITIALIZER 标记将该代码移出组件。

【参考方案1】：

我建议您只使用现有的包：https://www.npmjs.com/package/ngrx-store-localstorage

他的作者肯定已经找到了合适的地方。 如果您仍想使用自己的实现，那么我建议您查看他的源代码以了解他用于更新的触发器：https://github.com/btroncone/ngrx-store-localstorage/blob/master/src/index.ts#L289