Angular의 ngRx 저장소

시작하기 전에 작은 뒷이야기 하나. 그래서 몇 주 전에 제가 작업하고 있던 각도 프로젝트에 요구 사항이 있었습니다. 여기서는 여러 다른 구성 요소가 사용할 수 있도록 데이터 조각을 그대로 유지해야 했습니다. 내 React 본능은 상태를 관리하고 데이터를 그대로 유지하는 3가지 Angular 방식을 제공하는 몇 가지 각도 버전의 컨텍스트 API를 사용할 것을 제안했습니다.

1. 구성 요소 상태: 공유 데이터가 최소화된 간단한 애플리케이션이나 구성 요소의 경우 Angular의 구성 요소 속성과 이벤트 바인딩을 사용하여 개별 구성 요소 내의 상태를 관리할 수 있습니다. 여러 구성요소에 걸쳐 데이터를 공유해야 했기 때문에 이는 분명히 무리한 일이었습니다.

2. 서비스 기반 상태 관리: 서비스를 사용하여 중앙 집중식 상태 관리 솔루션을 만들 수 있습니다. 그러나 이 접근 방식을 따르면 애플리케이션의 성능과 확장성이 저하됩니다.

3. ngRx Store: ngRx Store는 중앙 집중식 상태 관리 기능을 제공합니다. NGRX는 RxJS 관찰 가능 항목과 작업을 사용하여 상태를 관리합니다.

세 곳 중 ngRx Store가 가장 적합한 것 같았습니다.

ngRx 스토어 구현:

ngRx 구현을 더 잘 이해하려면 먼저 ngRx가 어떻게 작동하는지 이해해야 합니다.

흐름은 구성 요소에서 시작됩니다. ngRx의 좋은 점은 구성 요소가 상태를 관리하는 방법을 알 필요가 없다는 것입니다. 유일하게 걱정되는 것은 사용자가 삭제 버튼을 클릭한 것처럼 어떤 일(이벤트)이 발생했음을 알리는 작업을 전달하는 것입니다.

이 시점에서 감속기가 작동합니다. 리듀서는 특정 작업이 상태를 어떻게 수정해야 하는지 결정하는 역할을 담당합니다. 일반적으로 상태를 관리하려는 모든 엔터티에 대해 감속기가 있습니다. 따라서 Reducer는 앱에서 전달되는 모든 작업을 감지하고 상태를 수정하는 방법을 결정하고 수정되면 업데이트된 상태를 ngRx Store(애플리케이션 전체의 모든 상태에 대한 전역 저장소)에 저장합니다.

마지막으로 구성 요소가 저장소에 액세스하려고 하면 구성 요소는 선택기를 사용하여 저장소에서 필요한 상태를 가져옵니다.

이제 우리(실제로는 내) 손을 더럽히고 Todo 애플리케이션용 스토어를 구현해 보겠습니다.

1단계: 액션 만들기

createAction 메소드 내에서 두 개의 매개변수를 전달합니다. 하나는 작업을 구별하는 데 사용할 고유 문자열이고 다른 하나는 전송하려는 페이로드입니다(선택 사항).

2단계: 리듀서 생성
리듀서에서는 특정 작업을 디스패치할 때 수행할 초기 상태와 작업을 전달합니다.

3단계: 작업 디스패치
액션을 전달하는 스토어의 디스패치 메소드를 호출하여 액션을 디스패치합니다.

4단계: 선택기 만들기

AppState는 할 일 상태를 선택하는 전체 애플리케이션의 중앙 저장소를 나타냅니다. 이제 Dispatching Actions 코드의 라인 번호에서 했던 것처럼 스토어 데이터 소비를 시작할 수 있습니다. 11.

마지막으로 애플리케이션 전체에서 사용할 수 있도록 앱 모듈 가져오기에 todoReducer를 추가해야 합니다.

결론

이번 블로그에서는 ngRx 스토어의 작동 방식과 애플리케이션에서 이를 구현하는 방법을 자세히 요약하고 설명했습니다. ngRx 저장소는 애플리케이션이 성장함에 따라 데이터를 저장하고 다양한 구성 요소에 걸쳐 액세스하는 데 매우 유용할 수 있습니다. 도움이 되었기를 바랍니다 ;)

위 내용은 Angular의 ngRx 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!