NGRX/Store를 사용하여 각도 2 앱의 상태 관리

NGRX/Store를 사용하여 Angular 2의 응용 프로그램 상태 관리 이 기사는 RXJ를 활용하는 Redux 구현 인 NGRX/Store 라이브러리를 사용하여 Angular 2 응용 프로그램의 효과적인 상태 관리를 탐색합니다. 우리는 공유 변동성 상태의 과제를 해결하고 NGRX/Store가 단방향 데이터 흐름 아키텍처를 어떻게 설정하는지 보여줍니다. 예제 응용 프로그램에는 YouTube 비디오 검색이 포함됩니다

NGRX/Store의 주요 이점 :

중앙 집중식 상태 관리 :

는 응용 프로그램 상태에 대한 단일 진실의 원천을 제공하여 구성 요소의 일관성을 보장합니다. RXJS를 사용한 Redux 패턴 :

RXJS Observables를 사용하여 Redux 아키텍처를 구현하여 예측 가능한 상태 전환 및 반응성 프로그래밍을 가능하게합니다. 불변의 상태 : 는 동작 및 감속기를 사용하여 상태 불변성을 유지하여 의도하지 않은 부작용을 방지합니다. 구성 요소 디커플링 : 구성 요소가 상태 관리 로직에서 구성 요소를 분리하여 구성 요소 재사용성 및 테스트 가능성을 향상시킵니다.

단순화 된 테스트 :

예측 가능한 출력을 생성하는 순수한 감속기 기능으로 테스트를 용이하게합니다. 강화 디버깅 :
• 는 디버깅 및 상태 변경 추적 개선을 위해 NGRX 스토어 데트 툴을 활용합니다. 공유 된 돌연변이 상태의 위험 :
• 여러 상호 작용 구성 요소를 갖는 응용 분야에서 공유 된 돌연변이 상태는 불일치와 예측할 수없는 행동으로 이어질 수 있습니다. 여러 구성 요소가 조정없이 동일한 데이터를 수정한다고 상상해보십시오. 공유 컴퓨터 운영 체제를 독립적으로 변경하는 여러 사용자와 유사하게 상상해보십시오. 검색 응용 프로그램에서 공유 변동성 상태 : 이름 및 위치 기반 검색에 대한 구성 요소가있는 검색 페이지를 고려하십시오. 이러한 구성 요소가 공유 검색 개체를 직접 수정하면 일관성을 유지하는 것이 복잡해집니다. 규칙에는 다음이 포함될 수 있습니다 <:> 빈 이름 필드 : 명확한 검색 결과. 이름 만 : 이름으로 검색. 이름과 위치 : 이름과 위치별 검색. 위치 검색에는 좌표 (위도/경도)와 반경이 필요합니다
• 도전 해결 : 몇 가지 접근법이 존재하지만 종종 동점 코드, 복잡한 테스트 및 단일 책임 원칙 위반으로 이어집니다. 구성 요소와 서비스간에 검색 객체를 직접 전달하면 단단한 커플 링이 생성되고 테스트가 어려워집니다. 서비스 내에서 검색 객체를 캡슐화하면 여러 책임을 처리하는 서비스로 이어집니다. ngrx/store가있는 Redux 솔루션 :
> ngrx/store는 Redux 패턴을 기반으로 솔루션을 제공합니다. 워크 플로는 다음과 같습니다

구성 요소 디스패치 조치 : 구성 요소는 상태 변경을 설명하는 동작을 방출합니다 액션 업데이트 상점 업데이트 :
1. 액션은 NGRX/스토어로 파견됩니다. reducer는 새로운 상태를 생성합니다. reture functions 프로세스 동작과 새로운 상태를 생성하기위한 현재 상태. 가입자가 상태 변경에 반응합니다. 구성 요소는 상점에 가입하고 상태 업데이트에 반응합니다.
이 접근법은 우려 사항을 분리합니다. NGRX/Store는 상태 일관성을 관리하고 RXJS는 메시지 전달 메시지를 처리합니다.
2. YouTube 검색 예 : 다음 섹션에서는 ngrx/store를 사용하여 YouTube 비디오 검색 응용 프로그램을 구축하는 것을 안내합니다. 전체 코드는 github에서 사용할 수 있습니다
(참고 : 구성 요소, 감속기 및 YouTube API와의 통합의 상세한 구현은 여기에 전장 기사에 포함됩니다. 공간 제약으로 인해 높은 수준의 개요를 제공하겠습니다. )
3. 응용 프로그램은 다음과 같이 구성됩니다
:
4. 검색 쿼리의 구조를 정의합니다 (이름, 선택적 위치, 반경). :
검색 결과의 구조를 정의합니다 (ID, 제목, 썸네일 URL).

:

텍스트 입력이있는 구성 요소 입력이 변경 될 때 동작을 발송하는 구성 요소.

: 위치 기반 검색 및 반경 입력에 대한 확인란이있는 구성 요소.

: 디스패치 작업을 기반으로 응용 프로그램 상태를 업데이트하는 감속기 함수. :

ngrx/store를 가져오고 구성하는 각도 모듈

: 검색 구성 요소와 검색 결과를 표시하는 기본 응용 프로그램 구성 요소. NGRX/Store 통합 :

파일은

를 제공하고 필요한 감소기를 포함하도록 구성됩니다. 구성 요소는

및 디스패치 동작을 주입합니다. 는 UI를 업데이트하기 위해 매장에 가입합니다. 결론 : (원래 입력의 FAQS 섹션은 여기에 전장 기사에 포함됩니다.)

위 내용은 NGRX/Store를 사용하여 각도 2 앱의 상태 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!