如何处理我的ngrx商店的筛选功能？
如何处理我的ngrx商店的筛选功能？
提问于 2020-04-16 09:35:24
如何处理我的商店的过滤功能？
目前，它正在使用效果服务从外部源获取数据。
一旦我们获取数据，它将在我的商店内可用。
因此，我希望根据某些筛选条件筛选出存储中的实体(本地ngrx存储，而不是后台数据库)。
这是项的接口。
export interface item {
id: string;
name: string;
price: number;
location: string;
category: string;
...
}// component.ts
this.store.dispatch(loadItems())
this.Items$ = this.store.pipe(select(selectItems))//actions.ts
export const loadItems = createAction(
'[Item Items Component] Load Items',
);
export const loadItemsSuccess = createAction(
'[Item Items/API] Load Items Success',
props<{ Items: Item[] }>()
);
export const loadItemsFailure = createAction(
'[Item Items/API] Load Items Failure',
props<{ error: any }>()
);// effects.ts
loadItems$ = createEffect(() =>
this.actions$.pipe(
ofType(ItemActions.loadItems),
mergeMap(action =>
this.defaultService.getContentModeration().pipe(
map(Items => ItemActions.loadItemsSuccess({ Items })),
catchError(error =>
of(ItemActions.loadItemsFailure({ error }))
)
)
)
)
)// selector.ts
export const selectItemState = createFeatureSelector<ItemState>(
ItemsFeatureKey
);
export const selectItems = createSelector(selectItemState, selectAll);// reducer.ts
export const ItemsFeatureKey = 'Items';
export interface ItemState extends EntityState<Item> {
// additional entities state properties
error: any;
}
export const adapter: EntityAdapter<Item> = createEntityAdapter<Item>({
sortComparer: (c1: Item, c2: Item) => {
const compare = c1.timestamp - c2.timestamp;
return compare > 0 ? 11 : compare < 0 ? 1 : 0
},
selectId: Item => Item.contentId,
});
export const initialState: ItemState = adapter.getInitialState({
// additional entity state properties
error: undefined
});
export const reducer = createReducer(
initialState,
on(ItemActions.loadItemsSuccess,
(state, action) => adapter.setAll(action.Items, state)
),
on(ItemActions.loadItemsFailure,
(state, action) => {
return {
...state,
error: action.error
}
}
),
export const {
selectIds,
selectEntities,
selectAll,
selectTotal,
} = adapter.getSelectors();目前我正在使用过滤器管。但这是不可行的。它正在减慢我的应用程序。我想利用处理状态的商店的潜力。
因此，我想根据名称、价格、类别或组合名称、价格、类别筛选商店中的商品(实体)。就像我们在亚马逊、flipkart等网站上看到的常规过滤器一样.
所有的解决方案我认为都是旧的(其中一些使用开关语句，但最近的ngrx选择器on()方法和操作也不同于以前的版本)。
有人能帮忙吗？
如果你没有时间回答，请告诉我这是否是死胡同。这样我就可以继续使用管道停止搜索了。
回答 1
Stack Overflow用户
发布于 2020-04-16 13:51:04
如果需要多个来自单个存储区(也称为派生状态)的过滤数据流，请使用带有道具的选择器：
// selectors
export const selectFilteredItems = createSelector(
selectItemState,
selectAll,
(items, props) => items.filter(entity => entity.name === props.name)
);
export const selectFilteredByTypeItems = () => {}
//component
this.filteredByNameItems$ = this.store.select(selectFilteredItems, {name: 'name1'});
this.filteredByTypeItems$ = this.store.select(selectFilteredByTypeItems, {type: 'type1'});如果要从UI中设置筛选器，则应将此筛选器存储在状态中，并在选择器中使用此筛选器：
// reducers
const initialState = {
filter: {name: '', type: ''}
}
// selectors
export const selectFilter = createSelector(
selectItemState,
state => state.filter
);
export const selectFilteredItems = createSelector(
selectItems,
selectFilter,
([allItems, uiFilter]) => allItems.filter(item => item.name === uiFilter.name)
); // note the combination of two selectors: for all items and for the filter不要忘记添加操作UI筛选器的操作和还原器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61247074
复制相关文章
相似问题
腾讯云开发者
