angular - 为 ngrx/data 实体创建选择器
问题描述
我有一个状态,我想从 ngrx/data 实体创建选择器。
import {
Action,
ActionReducer,
ActionReducerMap,
createFeatureSelector,
createSelector,
MetaReducer
} from '@ngrx/store';
import {environment} from '../../environments/environment';
import * as fromRouter from '@ngrx/router-store';
import * as fromDrawer from './drawer';
import {InjectionToken} from '@angular/core';
import {NavigationItem} from '../models/navigation-item';
export interface State {
router: fromRouter.RouterReducerState<any>;
drawerNavigationItems: fromDrawer.State;
}
export const ROOT_REDUCERS = new InjectionToken<ActionReducerMap<State, Action>>('Root reducers token', {factory: () => ({
router: fromRouter.routerReducer,
drawerNavigationItems: fromDrawer.reducer,
}),
});
export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
export const selectRouter = createFeatureSelector<
State,
fromRouter.RouterReducerState<any>
>('router');
const {
selectQueryParams, // select the current route query params
selectQueryParam, // factory function to select a query param
selectRouteParams, // select the current route params
selectRouteParam, // factory function to select a route param
selectRouteData, // select the current route data
selectUrl, // select the current url
} = fromRouter.getSelectors(selectRouter);
export const selectRouteId = selectRouteParam('id');
export const selectStatus = selectQueryParam('status');
// Drawer
export const selectDrawerNavigationItems = (state: State) => state.drawerNavigationItems.items as NavigationItem[];
如何使用预定义的选择器或使用来自 ngrx/data 的实体或服务编写自己的选择器?
例如,我想创建一个选择器来选择所有“社区”实体,然后在第 2 步中选择 1 by selectRouteId
。如果您想象一个 route /communities/:id
,selectRouteId
返回 Id,现在我想要来自的数据CommunityService
并使用在步骤 1 中创建或以某种方式导入和使用的选择器并返回一个结果 1Community
和selectRouteId
id,所以我以后可以做就像是this.store.dispatch(selectCommunityByCurrentRouteId);
这个问题特定于@ngrx/data。
解决方案
补充答案,具体回答我自己的问题,这就是 reducers/index.ts 现在的样子
import {
Action,
ActionReducer,
ActionReducerMap,
createFeatureSelector,
createSelector,
MetaReducer
} from '@ngrx/store';
import {environment} from '../../environments/environment';
import * as fromRouter from '@ngrx/router-store';
import * as fromDrawer from './drawer';
import {InjectionToken} from '@angular/core';
import {NavigationItem} from '../models/navigation-item';
import {EntitySelectorsFactory} from '@ngrx/data';
import {Community} from '../models/community';
export interface State {
router: fromRouter.RouterReducerState<any>;
drawerNavigationItems: fromDrawer.State;
}
export const ROOT_REDUCERS = new InjectionToken<ActionReducerMap<State, Action>>('Root reducers token', {factory: () => ({
router: fromRouter.routerReducer,
drawerNavigationItems: fromDrawer.reducer,
}),
});
export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
export const selectRouter = createFeatureSelector<
State,
fromRouter.RouterReducerState<any>
>('router');
const {
selectQueryParams, // select the current route query params
selectQueryParam, // factory function to select a query param
selectRouteParams, // select the current route params
selectRouteParam, // factory function to select a route param
selectRouteData, // select the current route data
selectUrl, // select the current url
} = fromRouter.getSelectors(selectRouter);
export const selectRouteId = selectRouteParam('id');
// export const selectStatus = selectQueryParam('status');
// Data
export const communitySelectors = new EntitySelectorsFactory().create<Community>('Community');
export const selectCommunityByRouteId = createSelector(
selectRouteId,
communitySelectors.selectEntities,
(id, communities) => communities.find(c => c.id === id)
);
// Drawer
export const selectDrawerNavigationItems = (state: State) => state.drawerNavigationItems.items as NavigationItem[];
您使用以下命令为 Community 模型创建选择器
export const communitySelectors = new EntitySelectorsFactory().create<Community>('Community');
然后将这两者结合起来,并Community
通过路由 id 返回 1。
export const selectCommunityByRouteId = createSelector(
selectRouteId,
communitySelectors.selectEntities,
(id, communities) => communities.find(c => c.id === id)
);
非常简单,您选择输入流,提供投影功能并返回结果。
后来,在组件中
export class OneCommunityComponent implements OnInit {
community$: Observable<Community>;
constructor(
private store: Store<State>,
) {
this.community$ = this.store.select(selectCommunityByRouteId);
}
}
推荐阅读
- java - 重新排列(交换)数组值
- mysql - MYsql - 获取多行开始和停止时间之间的平均时间
- angular - 如何使用复选框 Angular 2 绑定数据?
- catia - 根据 CATIA 中的尺寸变化的特征数量
- database - 如何使用 MongoDB 正确设计配方/成分的数据模型
- jquery - 我想使用 Jquery 为 Codeigniter 中的特定用户隐藏侧边栏
- python - 如何循环遍历 Python 列表并对列表元素执行数学计算?
- javascript - 在对象内调用函数,Error: Uncaught TypeError: this.showValue is not a function
- apache - Apache HTTPS Certbot LetsEncrypt 问题
- reactjs - ReactRouter 4 在其他路由上重定向到主页