Question

我如何从具有nrgx效果的localStorage加载状态？

初始化应用程序时，我会调用

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

接下来，触发CART_LOAD操作

动作

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

购物服务

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 ... ect之类的运算符，以便返回要分派的新动作。

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

您可以这样更改效果：

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

Angular7-如何使用nrgx-store / effects从localStorage加载状态

1 个答案: