Angular NGRX:一个实体Adapter中的多个实体



最近引入了NGRX/Entities:

https://medium.com/ngrx/introducing-ngrx-entity-598176456e15https://github.com/ngrx/platform/tree/master/example-app

并且由于它们以适配器处理A(读:一个,单个(地图 - 数据结构的方式进行,然后在初始化时获得其余的reducer状态,所以我想知道...

是否可以将多个实体放在一个还原/适配器中?界面说不,但也许有黑客,还是计划未来?如果我已经在一个还原器中有多个地图怎么办?我是被迫将其拆分还是避免实体功能?

以下答案有效。一种用于(在此示例中懒惰的方法,但不一定(模块的另一种方法是将还原器与ActionReDucermap相结合:

在您的Lazy.module.ts中:

export interface LazyState {
  lazyAState: LazyAState;
  lazyBState: LazyBState;
}
export const lazyReducers: ActionReducerMap<LazyState> = {
  lazyA: lazyAReducer,
  lazyB: lazyBReducer
};
export interface AppState extends forRoot.AppState {
  lazy: LazyState;
}
@NgModule({
  imports: [
    LazyRoutingModule,
    StoreModule.forFeature('lazy', lazyReducers),
    EffectsModule.forFeature([LazyEffects])
  ]
})
export class LazyModule {
  static forRoot() {
    return {
      ngModule: LazyModule,
      providers: [],
    };
  }
}

和in Lazy.Selectors.ts(您可以从还原文件导入适配器(:

export const getLazyState = createFeatureSelector<LazyState>('lazy');
const getLazyAState = createSelector(getLazyState, (state: LazyState) => state.lazyAState);
const getLazyBState = createSelector(getLazyState, (state: LazyState) => state.lazyBState);
const {selectEntities: lazyASelectEntities, selectAll: lazyASelectAll} = LAZY_A_ADAPTER.getSelectors();
export const lazyADictionary = createSelector(getLazyAState, lazyASelectEntities);
export const lazyAArray = createSelector(getLazyAState, lazyASelectAll);
export const lazyASomeOtherAttributeNotFromAdapter = createSelector(getLazyAState, (state: LazyAState) => state.ids as string[]);
const {selectEntities: lazyBSelectEntities, selectAll: lazyBSelectAll} = LAZY_B_ADAPTER.getSelectors();
// same as for lazy-A, you can also combine selectors if you want

ngrx实体是一个简单而又小的库来处理大型阵列,甚至认为文档无法说明如何在一个状态下使用多个实体,这应该很容易,因为库是什么幕后的做只是将数组正常化并创建一个带有数据的字典。

为了使一个或多个实体的状态使状态遵循下一步:

首先定义每个实体的状态。

interface CarState extends EntityState<Car> {
  total: number;
}
interface PlaceState extends EntityState<Place> {
  total: number;
}

然后创建一个持有实体的状态

export interface State {
  msg: string;
  cars: CarState;
  places: PlaceState;
}

为每个实体状态创建适配器以操纵数据并创建初始状态。

const adapterCar = createEntityAdapter<Car>();
const adapterPlace = createEntityAdapter<Place>();
const carInitialState: CarState = adapterCar.getInitialState({ total: 0 });
const placeInitialState: PlaceState = adapterPlace.getInitialState({ total: 0 });

定义初始全局状态

const initialState = {
  msg: 'Multiple entities in the same state',
  cars: carInitialState,
  places: placeInitialState
}

创建还原器:

export function reducer(state: State = initialState, action: ExampleActions): State {
  switch (action.type) {
    case ExampleActionTypes.GetCarList:
      return { ...state, cars: adapterCar.addMany(action.payload, state.cars) };
    case ExampleActionTypes.GetPlaceList:
      return { ...state, places: adapterPlace.addMany(action.payload, state.places) };
    default:
      return state;
  }
}

公开选择器

export const selectCarState = (state: State) => state.cars;
export const selectPlaceState = (state: State) => state.places;
export const { selectAll: selectAllCars } = adapterCar.getSelectors();
export const { selectAll: selectAllPlaces } = adapterPlace.getSelectors();

就是这样:(

live示例: https://stackblitz.com/edit/angular-mular-multiple-enties-inties-in-same-state

最新更新