Question

我需要合并两个Observable。我的IStore就像：

export interface IStore {
  user: IUser;
  plans: IPlanRedux;
  subscriptions: ISubscriptionRedux;
}

其中IPlanRedux是：

export interface IPlan {
    id?: string;
    name?: string;
    amount?: number;
    created?: Date;
    currency?: string;
    interval?: string;
    intervalCount?: number;
    trialPeriodDays?: number;
}

export interface IPlanRedux {
    entities: { [key: string]: IPlan };
    ids: Array<string>;
}

和ISubscriptionRedux是：

export interface ISubscription {
    id?: string;
    customer?: string;
    ...
    plan?: string;
    status?: string;
}

export interface ISubscriptionRedux {
    entities: { [key: string]: ISubscription };
    ids: Array<string>;
}

正如您所看到的，我正在单独存储计划和订阅。我需要加入他们。我的意思是，进入一个组件我需要获得每个订阅用户和每个订阅我需要获得此订阅的计划。所以，我希望订阅添加其计划的currency和amount字段：

{
 id: "from subscription",
 customer: "from subscription",
 plan: "from subscription",
 status: "from subscription",
 amount: "from plan",
 currency: "from plan"
}

目前，在我的ngOnInit组件方法上，我正在订阅：

ngOnInit():void {
  this.store$
    .select(fromRoot.getUserState)
    .filter(user => user.id != null && user.logged)
    .do(user => this.store$.dispatch({type: 'LOAD_SUBSCRIPTIONS', payload: {username: user.username}}))
    .take(1)
    .subscribe();
}

所以，我不知道：

何时发送'LOAD_PLANS'行动。
如何合并它们。

有什么想法吗？

Answer 1

我使用重新选择库每天多次解决这个问题。它不仅允许您编写将多个状态片组合在一起的可读查询，以创建组件喜欢的视图对象，还可以优化查询，以便一旦针对store.state运行查询，它就不会再次运行它，除非那个状态片已经改变。这会产生差异，您的应用程序会变得越大。 https://github.com/reactjs/reselect

NGRX：如何从IStore合并实体（一对多关系）

1 个答案: