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
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
