Angular - ngrx in State (3) router-store&Entity& component-store

router-store

- Router를 Store 와 연결

import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      router: routerReducer,
    }),
    RouterModule.forRoot([
      // routes
    ]),
    // Connects RouterModule with StoreModule, uses MinimalRouterStateSerializer by default
    StoreRouterConnectingModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Entity

- Router를 Store 와 연결

- 데이터베이스에서 엔티티를 가져와 상태 관리를 용이하게 한다

- 엔티티는 일반적으로 데이터의 모델 객체를 나타낸다

- 상태 관리를 단순화, 쉽게 업데이트하고 추적

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

export interface State extends EntityState<User> {
  // additional entity state properties
  selectedUserId: string | null;
}

 

Entity Adapter

- 엔티티 배열을 매핑하고, 엔티티를 고유 식별자를 통해 접근하고 업데이트하는 등의 기능을 제공

- 일반적인 엔티티 관리 작업을 수행하기 위해 중복 코드를 작성할 필요 없이, 효율적이고 일관된 방식으로 애플리케이션 상태를 업데이트

- 상태 업데이트 작업에 대한 표준화된 인터페이스를 제공하므로 코드 유지보수 및 디버깅이 더욱 쉬워짐

 

import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';

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

export interface State extends EntityState<User> {
  // additional entities state properties
  selectedUserId: string | null;
}

export function selectUserId(a: User): string {
  //In this case this would be optional since primary key is id
  return a.id;
}

export function sortByName(a: User, b: User): number {
  return a.name.localeCompare(b.name);
}

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
  selectId: selectUserId,
  sortComparer: sortByName,
});

 

component-store

- 애플리케이션의 전역 상태를 관리하는 ngrx Store와 달리 구성 요소의 로컬 상태를 관리한다.

- 스토어와 비교했을때 ComponentStore는 더 작고 더 많은 로컬 상태를 관리한다.

export interface MoviesState {
  movies: Movie[];
}

@Injectable()
export class MoviesStore extends ComponentStore<MoviesState> {
  
  constructor() {
    super({movies: []});
  }
}