Javascript 为什么我的@Effect会用Angular 6中的ngrx覆盖现有状态？

我在Angular 6应用程序中使用ngrx，我可以成功地从数据库加载数据并在屏幕上显示。但是，当我在应用程序中导航到一个新页面，然后返回时，该状态不会被保留，并且似乎再次调用@Effect并从数据库中再次加载数据。这是我的密码：

影响

行动

贮藏

组成部分

---

您的ngrx实现对我来说似乎一切正常。你所描述的是绝对正常的行为。一旦您离开某个页面，组件就会被销毁，并创建一个新组件，即调用ngOnInit。如果将加载逻辑放在ngOnInit中，则每次导航到此页面时都会加载状态。

如果加载了，则没有解析程序或防护程序来处理，因此从我看到的情况来看，这是基于代码片段的预期行为。我想我已经解决了。在我的@Effect中，它在我的switchMap之前添加了take1 RxJS操作符。它似乎已经解决了这个问题，从一个功能到另一个功能，从一个页面到另一个页面都保留了状态。是的，在这种情况下这是可能的。我认为缺点是，我认为稍后再发送第二个加载操作可能没有效果。我在开发工具中看到，每次我返回页面时都会调用加载操作，并且状态保持不变。目前我只进行了一次加载，但将查看第二次加载是否无效。我有一个应用程序，在该应用程序/模块加载后，我会立即分派加载操作。这将在后台异步发生。当用户导航到组件时，数据已经存在，因此他/她不必等待数据加载。我也考虑过这一点。我的应用程序正在使用延迟加载，所以我很可能会将此加载效果放在功能组件中，然后每当该功能被点击时，数据就已经存在了。与在应用程序加载中执行相同的概念。谢谢:-

export class ProductEffects {
    constructor(private productService: ProductService, private actions$: Actions) { }

    @Effect()
    loadProducts$: Observable<Action> = this.actions$.pipe(
        ofType(productActions.LOAD_ACTION),
        switchMap(action =>
            this.productsService.getProductDetails().pipe(
                map(product => new productActions.LoadSuccess(product)),
                catchError(err => of(new productActions.LoadError(err)))
            )
        )
    );

export interface ProductState {
    product: Product;
}

const initialState: ProductState = {
    product: {}
};

export function reducer(state = initialState, action: Action) {
    switch (action.type) {
        case SET_PRODUCT:
            return { ...state, product: (action as SetProductAction).payload };

        case LOAD_SUCCESS:
            return { ...state, product: (action as LoadSuccess).payload, error: '' };

        default: return state;
    }
}

export const SET_PRODUCT = '[Product] Set Product';
export const LOAD = '[Product] Load';
export const LOAD_SUCCESS = '[Product] Load Success';
export const LOAD_ERROR = '[Product] Load Error';

export class SetProductAction implements Action {
    readonly type = SET_PRODUCT;
    constructor(public payload: Product) { }
}

export class Load implements Action {
    readonly type = LOAD;
}

export class LoadSuccess implements Action {
    readonly type = LOAD_SUCCESS;
    constructor(public payload: Product) { }
}

export type ProductActions = SetProduct | Load | LoadSuccess;

export interface State extends fromRoot.AppState {
    product: fromProduct.ProductState;
}

// selectors
const getProductState = createFeatureSelector<fromProduct.ProductState>('product');

export const getProduct = createSelector(
    getProductState,
    state => state.product
}

products$: Observable<Product>;

constructor(private store: Store<fromProduct.State>) { }

ngOnInit() {
    this.store.dispatch(new Load());
    this.products$ = this.store.pipe(select(fromProduct.getProduct));
}