NgRx 엔터티로 Angular 코드를 단순화하세요

여름에는 제가 좋아하는 장소를 처리할 수 있는 작은 애플리케이션을 구축하여 NgRx 기술을 새롭게 했습니다. 그 과정에서 나는 내 앱의 상태를 실제로 제어할 수 있었기 때문에 NgRx를 즐겼습니다.

많은 소음을 발생시킨 한 가지 요인은 CRUD 작업을 위해 정의할 선택자와 작업의 수였습니다. 개인 프로젝트에서는 큰 문제가 되지 않았지만, 선택기와 리듀서와 함께 많은 슬라이스와 섹션이 포함된 대규모 애플리케이션을 구축할 때 코드를 유지 관리하기가 더 어려워졌습니다.

예를 들어 각 작업에 대한 선택기와 함께 성공, 오류, 업데이트 및 삭제에 대한 작업을 작성하면 복잡성이 증가하고 더 많은 테스트가 필요합니다.

여기서 NgRx 엔터티가 필요합니다. NgRx 엔터티 상용구 코드를 줄이고, 테스트를 단순화하고, 제공 시간을 단축하고, 코드베이스의 유지 관리를 더욱 쉽게 유지하세요. 이 기사에서는 CRUD 로직을 단순화하기 위해 NgRx 엔터티를 사용하여 내 프로젝트에서 장소의 상태 관리를 리팩토링하는 과정을 안내하겠습니다.

NgRx 엔터티는 무엇이고 왜 필요한가요?

코드를 살펴보기 전에 먼저 NgRx 엔터티가 무엇인지, 왜 사용을 고려해야 하는지 알아보겠습니다.

@NgRx/Entity란 무엇입니까?

NgRx 엔터티는 데이터 수집 작업을 단순화하는 NgRx의 확장입니다. 상태에서 엔터티 추가, 업데이트, 제거는 물론 스토어에서 엔터티 선택과 같은 작업을 쉽게 수행할 수 있는 유틸리티 세트를 제공합니다.

NgRx 엔터티로 이동해야 하는 이유는 무엇입니까?

컬렉션에 대한 CRUD 작업을 구축할 때 리듀서에 메서드를 수동으로 작성하고 각 작업에 대해 반복적인 선택기를 만드는 것은 지루하고 오류가 발생하기 쉽습니다. NgRx 엔터티는 이러한 책임의 상당 부분을 오프로드하여 작성하고 유지 관리해야 하는 코드의 양을 줄입니다. NgRx 엔터티는 상용구 코드를 최소화하여 기술 부채를 줄이고 대규모 애플리케이션의 상태 관리를 단순화하는 데 도움이 됩니다.

어떻게 작동하나요?

NgRx 엔터티는 EntityState, EntityAdapter 및 사전 정의된 선택기와 같은 도구를 제공하여 컬렉션 작업을 간소화합니다.

엔터티상태

EntityState 인터페이스는 NgRx 엔터티의 핵심입니다. 두 가지 주요 속성을 사용하여 엔터티 컬렉션을 저장합니다.

• ids: 엔터티 ID의 배열.

• 엔티티: 각 엔터티가 해당 ID로 저장되는 사전입니다.
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

엔티티 상태에 대해 자세히 알아보세요

엔터티 어댑터

EntityAdapter는 createEntityAdapter 함수를 사용하여 생성됩니다. 엔터티 추가, 업데이트, 제거 등 상태의 엔터티를 관리하기 위한 다양한 도우미 메서드를 제공합니다. 또한 엔터티를 식별하고 정렬하는 방법을 구성할 수 있습니다.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

EntityAdapter를 사용하면 엔터티를 식별하는 방법(selectId)과 sortComparer를 사용하여 컬렉션을 정렬하는 방법을 정의할 수도 있습니다.

EntityAdapter에 대해 자세히 알아보기

이제 기본 사항을 이해했으므로 NgRx 엔터티

를 사용하여 애플리케이션에서 장소의 상태 관리를 리팩토링하는 방법을 살펴보겠습니다.

프로젝트 설정

먼저 이전 기사의 저장소를 복제하고 기본 CRUD 설정이 있는 분기로 전환합니다.

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

?이 기사는 NgRx 학습 시리즈의 일부입니다. 따라해보고 싶으신 분들은 꼭 확인해 보세요.

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

이 브랜치에는 NgRx가 이미 설치되어 있고 MockAPI.io가 API 호출용으로 구성된 설정이 포함되어 있습니다.

저희 목표는 NgRx 엔터티를 사용하여 장소를 관리하고, CRUD 작업을 위해 리팩토링 작업이온하고, 업데이트 하는 것입니다. 리듀서 장소 추가, 업데이트, 삭제와 같은 어댑터 작업을 사용하여 단순화하려면 선택기를 사용하여 스토어에서 장소 목록을 검색하세요.

NgRx 엔터티 설치

먼저 npm i를 사용하여 프로젝트 종속성을 설치한 다음 ng add @ngrx/entity를 실행하여 회로도를 사용하여 NgRx 엔터티를 추가합니다.

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

완벽합니다. 리팩토링을 시작할 준비가 되었습니다!

상태 리팩토링

이전 버전의 프로젝트에서는 상태를 관리하기 위해 배열과 리듀서를 수동으로 정의했습니다. NgRx 엔터티를 사용하면 어댑터가 수집 로직을 관리하도록 할 수 있습니다.

먼저 place.state.ts를 열고 PlacesState를 리팩터링하여 EntityState에서 확장합니다.

npm i
ng add @ngrx/entity

다음으로 createEntityAdapter를 사용하여 장소 엔터티에 대한 엔터티 어댑터를 초기화합니다.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

마지막으로 getInitialState:
를 사용하여 수동 초기 상태를 어댑터에서 제공하는 것으로 교체합니다.

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

EntityState를 사용하도록 상태를 리팩터링하고 장소 목록을 자동으로 처리하도록 EntityAdapter를 초기화했습니다.

NgRx 엔터티를 사용하도록 작업을 업데이트해 보겠습니다.

작업 리팩토링

이전 기사에서는 항목 업데이트와 수정을 수동으로 처리했습니다. 이제 NgRx 엔터티를 사용하여 Update를 사용하여 부분 업데이트를 처리하겠습니다.

places.actions.ts에서 Update를 사용하도록 장소 업데이트 작업을 업데이트합니다. 이를 통해 엔터티의 일부만 수정할 수 있습니다.

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

완벽합니다. 업데이트 처리를 단순화하기 위해 업데이트 유형을 사용하여 NgRx 엔터티와 함께 작동하도록 작업을 업데이트했습니다. 이것이 리듀서에 어떤 영향을 미치는지 확인하고 장소 추가, 업데이트, 제거와 같은 작업에 엔터티 어댑터 방법을 사용하도록 리팩토링할 시간입니다.

리듀서 리팩토링

리듀서는 NgRx 엔터티가 정말 빛나는 곳입니다. 장소 추가, 업데이트, 삭제를 위한 수동 로직을 작성하는 대신 이제 엔터티 어댑터가 제공하는 메소드를 사용합니다.

리듀서를 단순화하는 방법은 다음과 같습니다.

npm i
ng add @ngrx/entity

상태의 엔터티를 처리하기 위해 어댑터에서 addOne, updateOne, RemoveOne 및 setAll과 같은 메서드를 사용했습니다.

기타 유용한 방법은 다음과 같습니다.

• addMany: 여러 항목을 추가합니다.

• removeMany: ID별로 여러 항목을 제거합니다.

• upsertOne: 존재 여부에 따라 엔터티를 추가하거나 업데이트합니다.

EntityAdapter의 리듀서 메소드에 대해 자세히 알아보세요.

상태, 액션 및 리듀서가 리팩터링되었으므로 이제 NgRx 엔터티' 사전 정의된 선택기를 활용하도록 선택기를 리팩터링하겠습니다.

선택기 리팩토링

NgRx 엔터티는 스토어 쿼리를 훨씬 쉽게 만들어주는 사전 정의된 선택기 세트를 제공합니다. selectAll, selectEntities, selectIds와 같은 선택기를 어댑터에서 직접 사용하겠습니다.

places.selectors.ts에서 선택기를 리팩터링하는 방법은 다음과 같습니다.

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

이러한 내장 선택기를 사용하면 상태에 액세스하기 위해 선택기를 수동으로 생성할 필요성이 크게 줄어듭니다.

미리 정의된 선택기를 사용하도록 선택기를 리팩터링한 후 선택기를 수동으로 정의할 필요성을 줄인 후에는 이러한 변경 사항을 반영하고 새로운 상태와 작업을 사용할 수 있도록 양식 구성 요소를 업데이트해야 합니다.

양식 구성 요소 업데이트

이제 상태, 액션, 리듀서가 리팩터링되었으므로 이러한 변경 사항을 반영하도록 양식 구성 요소를 업데이트해야 합니다.

예를 들어 PlaceFormComponent에서는 Update 변경 사항을 저장할 때 입력하세요:

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

새로운 액션과 상태 리팩토링을 사용하도록 양식 구성 요소를 업데이트했습니다. 이동하여 효과가 NgRx 엔터티

와 올바르게 작동하는지 확인해 보겠습니다.

리팩토링 효과

마지막으로 NgRx Entities에서 효과가 작동하도록 만들겠습니다. PlacesPageActions.updatePlace를 업데이트하고 올바른 Update를 전달하기만 하면 됩니다. updatePlaceEffect$ 효과의 개체입니다.

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

완료! 저는 우리 앱이 NgRx 엔터티와 함께 작동하고 있으며 마이그레이션이 너무 쉬웠어요! ngrx 엔터티 문서가 매우 도움이 되었고

결론

내 코드를 NgRx Entities로 옮긴 후 컬렉션 작업 시 복잡성과 상용구를 줄이는 데 도움이 된다고 느꼈습니다. NgRx 엔터티는 대부분의 시나리오에 대한 수많은 메서드를 통해 컬렉션 작업 및 상호 작용을 단순화하여 CRUD 작업에 필요한 상용구 코드를 상당 부분 제거합니다.

이 기사가 ngrx에서 컬렉션 작업이 필요할 때 ngrx-entities를 사용하는 데 도움이 되기를 바랍니다.

• 소스 코드: https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

사진: Yonko Kilasi, Unsplash

위 내용은 NgRx 엔터티로 Angular 코드를 단순화하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!