ngrx/entity for whole state or part

0
votes

I'm not sure I understand @ngrx/entity package. There are of course examples but I didn't found any with a state bigger than one property/subject.

So before using @ngrx/entity my sub state look like below. Yes it's actually a sub state. That means that I've separation per feature but still it isn't single property interface. I have a few model interfaces and State consists of them. Those that are arrays I want to replace with 'entity features'. And from examples I see that Entity is for the whole state?

export interface ListItems {
}

export interface FooObject {
}

export interface State {
  property1: ListItems[];
  others: FooObject[];
  name: string;
  isLoading: boolean;
  error: string;
}

So to use Enity should I do?

export interface State extends EntityState<?> {
}

And what should I put in place of ? I have many properties.

or

each model interface ListItems, FooObject should extends EntityState ?

2
ngrxngrx-entity

2 Answers

0
votes

By the design if FooObject is an entity and ListItems is an entity you should have 2 separate EntityAdapters for them. Because EntityState is responsible to manage a single entity.

instead of property1: ListItems[]; and others: FooObject[] I would recommend to store ids only string[] or number[].

here you can find an example how to mange several types of entities with @ngrx/entity: https://github.com/satanTime/ngrx-entity-relationship/blob/master/e2e/angular9/src/app/store/user/user.reducer.ts https://github.com/satanTime/ngrx-entity-relationship/blob/master/e2e/angular9/src/app/store/address/address.reducer.ts

Later in code you can select the loading flag, and once it has been finished to get its ids and to select ListItems and FooObject via withLatestFrom rxjs operator.

0
votes

You can't use more than one entityAdapter / state interface, because the entity adapter is typed for that interface. You can add some extra fields but no more arrays in one slice of the state. EX:

export interface MyEntity {
  id: string;
  name: string;
}

export interface MyEntityState extends EntityState<MyEntity> {
  // Additional props
  loading: boolean;
  loaded: boolean;
}

export const adapter: EntityAdapter<MyEntity> = createEntityAdapter<MyEntity>();

const _initialState = adapter.getInitialState({
  loading: false,
  loaded: false
})

...