Angular 7 - 如何使用ngrx-store / effects从本地存储加载状态

Question

我如何使用nrgx效果从localStorage加载状态？

当我初始化应用程序时，我打电话

this.store.dispatch(new cartActions.LoadCart());

接下来，触发操作CART_LOAD

cart.action

export class LoadCart implements Action {
    readonly type = LOAD_CART;
}

export class LoadCartSuccess implements Action {
    readonly type = LOAD_CART_SUCCESS;

    constructor(public payload: any) {}
}

接下来，我听听效果

@Effect()
    loadCart$ = this.actions$.pipe(ofType(cartActions.LOAD_CART),
        tap(action => {
            return this.CartService.getCart().subscribe(cart => new cartActions.LoadCartSuccess(cart));
        })
    );

cart.service

getCart() {
    return JSON.parse(localStorage.getItem('cart'));
}

本地存储

{products: Array(3), cartTotal: 3, cartCost: 12000}

但LOAD_CART_SUCCESS无关紧要

NgRx Store DevTools

我忘了做的是在应用程序初始化期间将localStorage放在商店中？

.

Answer 1

效果中使用的点击操作符不会发送任何操作，您可以将其用于记录或转发..

要在效果中触发动作，要使用map，switchMap，concatMap等运算符，以便返回要调度的新动作。

您的服务CartService不会返回observable，因此您无法订阅它。

您可以像这样更改效果：

@Effect() loadCart$ = this.actions$.pipe(ofType(cartActions.LOAD_CART), map(action => {
const cart = this.CartService.getCart();
return new cartActions.LoadCartSuccess(cart); 
}) );