我需要在reducer函数中访问ngrx / data实体的状态。
我正在构建一个分页器（分页），用户可以在其中浏览到最后一页以及其他选项。但是我不知道缓存中有多少个项目，EntitySelectorsFactorydos（selectCount），但我不想在组件中获取数据并使用props传递它们，而应该在减速器中。
也许有更好的方法。
动作
import {createAction, props} from '@ngrx/store';
export const toStart = createAction('[Pager] To Start');
export const toEnd = createAction('[Pager] To End');
export const incrementPage = createAction('[Pager] Increment');
export const decrementPage = createAction('[Pager] Decrement');
export const setPage = createAction('[Pager] Set', props<{page: number}>());
export const setPageSize = createAction('[Pager] Set Page Size', props<{size: number}>());
减速器
import { Action, createReducer, on } from '@ngrx/store';
import * as PagerActions from '../actions/pager';
import {EntitySelectorsFactory} from '@ngrx/data';
import {Rant} from '../models/rant';
export const pagerFeatureKey = 'pager';
export interface State {
page: number;
pageSize: number;
}
export const initialState: State = {
page: 1,
pageSize: 10,
};
const rantSelectors = new EntitySelectorsFactory().create<Rant>('Rant');
const pagerReducer = createReducer(
initialState,
on(PagerActions.toStart, state => ({...state, page: 1})),
on(PagerActions.toEnd, state => ({...state, page: Math.floor(rantSelectors.selectEntities.length / state.pageSize)})),
on(PagerActions.setPage, (state, action) => ({...state, page: action.page})),
on(PagerActions.incrementPage, state => ({...state, page: state.page + 1})), // TODO: check if out of bounds
on(PagerActions.decrementPage, state => ({...state, page: state.page > 1 ? state.page - 1 : 1})),
on(PagerActions.setPageSize, (state, action) => ({...state, pageSize: action.size}))
);
export function reducer(state: State | undefined, action: Action) {
return pagerReducer(state, action);
}
不管我做什么
on(PagerActions.toEnd, state => ({...state, page: Math.floor(rantSelectors.selectEntities.length / state.pageSize)})),
始终为0。rantSelectors.selectCount.length或更高。可能是因为长度为0。我还需要知道increment减速器中“无用”实体的长度或计数。
我不知道如何获得实际价值。
我在想...有一个用于实体计数的选择器，并使用道具在toEnd动作中传递该计数。另一个选择是副作用，但是它们令人困惑，恕我直言也不是编写代码的正确方法（无法读取的代码，缺少直接因果关系，是的，我知道，我不想为此争论）。然后，即使产生了副作用，如何在模块中对其进行定义？是AppEffects副作用还是明显的副作用？我正在猜测AppEffects，因为它不在另一个模块中。
app.module.ts
EffectsModule.forRoot([AppEffects]),
AppEffects =几乎是空的默认ng add内容。
是的，我需要获取化简器中@ ngrx / data实体的状态，获取其实际值，或者采用更优雅的方法。
我更喜欢保持组件清洁...我看到了两种解决您的问题的方法
rantSelectors.selectEntities.length通过将数字值添加到状态中，您可以只在存储区的这一部分中存储的长度。当您加载/更新时，rantSelectors.selectEntities您还将更新商店的这一部分。export interface State {
page: number;
pageSize: number;
rantEntitiesSize: number;
// ...
on(rantActions.loadSuccess,
rantActions.UpdateSuccess, //could include adding objects to the current loaded list
rantActions.RemoveSuccess, //(negative number)
(state, action) =>
({...state, rantEntitiesSize: (state.rantEntitiesSize + action)}),
}
toEnd action在减速器中保留和不使用它，而是构建一个调用的效果，该效果toEnd action从存储的其他部分获取所需的值，然后调用将值传递给减速器的第二个操作。 toEndPager$ = createEffect(() =>
this.actions$.pipe(
ofType(PagerActions.toEnd),
withLatestFrom(this.store.select(rantSelectors.selectEntities.length)),
switchMap(([{},length]) => {
return of(PagerActions.toEndSuccess({ length });
})
)
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句