javascript - 从 Angular-Redux 商店获取最新状态

Question

我创建自己的商店

export interface IAppState {
    cartData:ICartItem[];

    lastUpdate:Date;
}

并添加一些reducer来处理ADD和REMOVE操作

但在很多地方我只需要商店的最新数据。根据文档，添加 attr @select() 来存储项目就足够了，添加您将获得当前状态。

但是我创建了一些服务，可以完成所有工作，例如从商店中获取、添加和删除商品

@Injectable()
export class CartService {
    @select() private cartData: ICartItem[] ;
    constructor(private ngRedux: NgRedux<IAppState>) { }

    getItems() {
        return this.cartData;
    }

    addItem(item: IItem) {
        this.ngRedux.dispatch({type: ADD_CART_ITEM, cartItem : item});
    }

    removeItem(itemId: string) {
        this.ngRedux.dispatch({type: REMOVE_CART_ITEM, id: itemId});
    }

    removeAllItems() {
        this.ngRedux.dispatch({type: REMOVE_ALL_CART_ITEMS});
    }
}

但是问题 - 当我在组件初始化时使用 getItems 初始化 myCartData 属性时，稍后我可以添加或删除某些项目，但是 myCartData > 在这一切之后，属性将不会更新。

那么我如何使用此类服务​​从商店获取最新状态？或者这种方法很糟糕，我需要在需要时直接从商店获取状态，而不需要任何自定义服务？

Answer 1

试试这个:

@Injectable()
export class CartService {
    @select('cartData')  cartData$: Observable<ICartItem[]> ;

    constructor(private ngRedux: NgRedux<IAppState>) { }

    addItem(item: IItem) {
        this.ngRedux.dispatch({type: ADD_CART_ITEM, cartItem : item});
    }

    removeItem(itemId: string) {
        this.ngRedux.dispatch({type: REMOVE_CART_ITEM, id: itemId});
    }

    removeAllItems() {
        this.ngRedux.dispatch({type: REMOVE_ALL_CART_ITEMS});
    }
}

在您的组件文件中，只需订阅 cardService.cardData$，或在模板中使用异步管道。