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