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

Question

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

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}));
        });
    }
}

Answer 1

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

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