在 ngrx 选择器中的两个数组之间分配参数的正确方法是什么



我在 ngrx 选择器中的两个数组之间分配参数时遇到问题。

问题 1:如果我像这样调度两个操作:

this.store.dispatch(new GetArray);
this.store.dispatch(new GetAssociates);

所以我的选择器工作正常:

/* array data */
export const getArray = createSelector(selectArrayFeature, (state: fromArray.State) => state.array);
/* associates data */
export const getAssociates = createSelector(selectAssociatesFeature, (state: fromAssociates.State) => state.associates);
/* mapped array */
    export const getArrayWithAssociateName = createSelector(getArray, getAssociates, (array, associates) => {
      return array.map(item => {
        const obj = associates.find(val => val.id === item.eventTypeId);
        item.name = obj ? obj.label : null;
        return item
      });
    });

但是,我遇到的情况是"数组"数据已经预加载并且选择器"getArray"已经有数据,在这种情况下,我试图排除对 api 的不必要的调用并仅在 getArrayWithAssociateName' 返回一个没有关联名称的数组this.store.dispatch(new GetAssociates), in this case my selector调度。

问题 2:associates 是相当昂贵的调用,所以如果接收数据的时间晚于选择器检查的时间,它还会返回一个没有映射名称的数组。

那么有人可以帮助我找到我做错了什么吗? 提前致谢

创建选择器hasAssociates以检查何时使用 getArrayWithAssociateName

export const hasAssociates = createSelector(
  selectAssociatesFeature,
  (state: fromAssociates.State) => !!state.associates.length
);

或者验证选择器中的数组。

export const getArrayWithAssociateName = createSelector(
  getArray, 
  getAssociates, 
  (array, associates) => {
      if(!array.length || !associates.length) return [];
      // return mapping
    }
);

最新更新