NgRx 액션 그룹 생성자

이 기사에서는 @ngrx/store 패키지의 새로운 기능인 createActionGroup 버전 13.2에 도입된 기능을 살펴보겠습니다.

액션 크리에이터 사용

일반적으로 createAction 함수를 사용하여 작업 생성자를 정의합니다.

// products-page.actions.ts
import { createAction, props } from '@ngrx/store';

// defining an action without payload
export const opened = createAction('[Products Page] Opened');

// defining an action with payload using the `props` function
export const paginationChanged = createAction(
  '[Products Page] Pagination Changed',
  props<{ page: number; offset: number }>()
);

// defining an action with payload using the props factory
export const queryChanged = createAction(
  '[Product Page] Query Changed',
  (query: string) => ({ query })
);

이 예제에서는 "[소스] 이벤트 이름"패턴을 사용하여 각 작업의 소스가 "제품 페이지"인 작업 유형을 정의합니다. 또한 각 액션 생성자의 이름은 그것이 표현하는 이벤트의 카멜 케이스 이름과 동일합니다. 예를 들어 "Pagination Changed"이벤트의 작업 작성자 이름은 "paginationChanged"입니다.

💡 If you are not familiar with treating actions as unique events, learn more in this talk by .

제품 컨테이너 구성 요소에서 제품 페이지 작업을 사용하려면 일반적으로 명명된 가져오기를 사용합니다.

// products.component.ts
import * as ProductsPageActions from './products-page.actions';

@Component({ /* ... */ })
export class ProductsComponent implements OnInit {
  constructor(private readonly store: Store) {}

  ngOnInit(): void {
    this.store.dispatch(ProductsPageActions.opened());
  }
}

또 다른 일반적인 방법은 작업 파일에서 명명된 내보내기가 포함된 배럴 파일을 만드는 것입니다.

// products/actions/index.ts
export * as ProductsPageActions from './products-page.actions';
export * as ProductsApiActions from './products-api.actions';

명명된 내보내기는 필요한 경우 파일에서 추가로 사용할 수 있습니다.

작업 그룹 작성자 사용

createActionGroup 함수는 소스가 동일한 작업 작성자 그룹을 만듭니다. 입력 인수로 작업 그룹 소스와 이벤트 사전을 허용합니다. 여기서 이벤트는 이벤트 이름과 이벤트 소품의 키-값 쌍입니다.

// products-page.actions.ts
import { createActionGroup, emptyProps, props } from '@ngrx/store';

export const ProductsPageActions = createActionGroup({
  source: 'Products Page',
  events: {
   // defining an event without payload using the `emptyProps` function
    'Opened': emptyProps(),

    // defining an event with payload using the `props` function
    'Pagination Changed': props<{ page: number; offset: number }>(),

    // defining an event with payload using the props factory
    'Query Changed': (query: string) => ({ query }),
  },
});

💡 The emptyProps function is another addition to the @ngrx/store package. It is used to define an action without payload within an action group.

createActionGroup 함수는 이벤트 이름을 카멜 방식으로 케이싱하여 각 작업 생성자의 이름을 만들고 "[소스] 이벤트 이름"패턴을 사용하여 작업 유형을 만드는 작업 생성자 사전을 반환합니다.

// action type: [Products Page] Opened
ProductsPageActions.opened();

// action type: [Products Page] Pagination Changed
ProductsPageActions.paginationChanged({ page: 10, offset: 100 });

// action type: [Products Page] Query Changed
ProductsPageActions.queryChanged('ngrx');

또한 작업 그룹을 다른 파일로 직접 가져올 수 있으므로 더 이상 배럴 파일이나 명명된 가져오기가 필요하지 않습니다.

// products.component.ts
import { ProductsPageActions } from './products-page.actions';

@Component({ /* ... */ })
export class ProductsComponent implements OnInit {
  constructor(private readonly store: Store) {}

  ngOnInit(): void {
    this.store.dispatch(ProductsPageActions.opened());
  }
}

이전 작업을 복사하여 createAction 함수를 사용하여 새 작업을 생성했지만 실수로 해당 유형을 변경하는 것을 잊은 경우 컴파일이 통과됩니다. 다행히도 이것은 createActionGroup 함수의 경우가 아닙니다. 동일한 그룹의 두 작업이 동일한 유형을 갖는 경우 컴파일 오류가 발생합니다.

제한 사항

createAction 함수를 사용하여 이벤트 및 작업 작성자에 대해 서로 다른 이름을 정의할 수 있습니다.

export const productsLoadedSuccess = createAction(
  '[Products API] Products Are Loaded Successfully',
  props<{ products: Product[] }>()
);

이 예에서 이벤트 이름은 "제품이 성공적으로 로드되었습니다"이고 작업 생성자 이름은 "productsLoadedSuccess"입니다. 불행히도 이것은 createActionGroup 함수에서는 불가능합니다. 왜냐하면 액션 생성자 이름은 항상 카멜 케이스 이벤트 이름과 같기 때문입니다. 따라서 "제품이 성공적으로 로드되었습니다"라는 이벤트 이름의 경우 작업 생성자 이름은 "productsAreLoadedSuccessfully"가 됩니다.

제한

createActionGroup 함수를 사용하면 문자, 숫자 및 공백을 사용하여 이벤트 이름을 정의할 수 있습니다. 따옴표, 괄호 또는 문장 부호와 같은 일부 문자는 허용되지 않습니다. 금지된 문자의 전체 목록을 사용할 수 있습니다here.

결론

작업 그룹 생성자는 작업 파일의 코드를 줄여 개발자 경험을 향상시킵니다. 배럴 파일을 만들거나 작업에 명명된 가져오기를 사용하고, 여러 위치에서 동일한 작업 소스를 정의하고, 이벤트 및 작업 작성자에 대해 동일한 이름을 두 번 작성할 필요가 없습니다. 또한 작업 유형을 정의할 때 "[소스] 이벤트"패턴을 사용하여 좋은 작업 위생을 시행합니다.

자원

Official docs of the createActionGroup function

피어 리뷰어

createActionGroup PR을 검토하고 이 기사에 대한 유용한 제안을 해주신 친구들에게 감사드립니다!