🛠 Angular에서 NgRx를 사용한 상태 관리

📕 NgRx를 사용하여 Angular 응용 프로그램의 상태를 쉽게 관리하는 방법을 알고, 사용자와 관련된 기능을 처리하기 위해 Auth0의 SDK와 NgRx를 결합하는 방법을 이해한다.

간단한 소개

응용 프로그램을 구축할 때 상태 관리는 관건적인 구성 요소이다.우리는 각종 방법을 통해 각도 응용 프로그램의 상태를 관리할 수 있으며, 모든 방법은 장점과 단점을 가지고 있다.
이 블로그에서는 상태 관리 솔루션으로 NgRx를 중점적으로 소개합니다.NgRx를 사용하여 Recipe Admin Dashboard 응용 프로그램을 구축하여 응용 프로그램의 상태를 관리하는 방법을 연구할 것입니다.Auth0 보호 애플리케이션을 사용하는 방법과 NgRx와 함께 작업하는 방법도 학습합니다.

Ngrx 소개

NgRx은 Angular에서 반응식 응용 프로그램을 구축하는 데 사용되는 프레임워크입니다.NgRx의 영감은 Redux 모드 - 응용 프로그램의 이벤트를 통일하고 RxJS를 사용하여 상태를 내보냅니다.높은 레벨에서 NgRx는 단일 상태를 저장하고 동작을 사용하여 상태 변화를 나타낸다.NgRx는 많은 사용자 상호 작용과 여러 데이터 소스가 있는 애플리케이션에 적합한 복잡한 상태를 관리합니다.

Ngrx의 작동 방식

NgRx는 스토리지, 작업, 복원, 선택기 및 효과 등 5개의 주요 구성 요소로 구성됩니다.
NgRx는 모든 어플리케이션 데이터가 동일한 라이프 사이클을 거치는 단방향 데이터 스트림의 Redux 개념을 사용합니다.이런 단방향 데이터 흐름은 응용 프로그램의 상태를 더욱 예측할 수 있기 때문에 이해하기 쉽다.이 흐름은 상태 관리층에만 적용되며 표시층의 단방향 데이터 흐름과 혼동할 수 없습니다.다음 그림은 NgRx의 상태 관리 라이프 사이클을 보여줍니다.

상업계

클라이언트 데이터베이스로 볼 수 있습니다.NgRx의 스토리지는 애플리케이션의 고유한 진상 원천이 됩니다.이것은 응용 프로그램의 현재 상태를 반영합니다.

행동

동작은 프로그램에서 발생하는 독특한 이벤트를 표시합니다.이러한 이벤트의 범위는 응용 프로그램의 생명주기 이벤트, 사용자의 상호작용에서 네트워크 요청에 이르기까지이다.애플리케이션이 NgRx와 통신하는 방법을 알려 주는 작업입니다.

감속기

환원기는 상태 간의 전환을 처리하는 것을 책임진다.reducer는 스케줄링 작업에 반응하고 순수 함수를 실행하여 저장소를 업데이트합니다.순기능은 예측 가능하고 부작용이 없는 기능이다.같은 입력 집합을 지정하면 순수 함수는 항상 같은 출력 집합을 되돌려줍니다.

선택기

선택기는 상점에서 상태 세션을 가져오는 순수 함수입니다.선택기는 프로그램이 상태 변화를 감청하는 방식입니다.

영향

효과는 각 동작의 부작용을 처리한다.이러한 부작용은 어떤 작업이 스케줄링될 때 HTTP를 통해 외부 API와 통신하고 다른 작업을 스케줄링하여 상태를 업데이트하는 다른 부분을 포함한다.

선결 조건

Angular에는 active LTS or maintenance LTS 버전의 노드가 필요합니다.js.각도 응용도 npm packages의 많은 특성과 기능에 의존한다.npm 패키지를 다운로드하고 설치하려면 npm 또는 yarn과 같은 npm 패키지 관리자가 필요합니다.
이 프로젝트는 서버 측 구성 요소가 있는데, 실행 전단에 있을 때 반드시 병행 실행해야 한다.Api Express Typescript Menu repo의 지침을 따릅니다.이 blog post에서 Auth0을 사용하여 서버 사이드를 설정하는 방법에 대한 자세한 내용을 확인할 수 있습니다.
이 자습서는 Auth0을 NgRx와 함께 사용하는 방법에 대해 중점적으로 설명합니다.각도 응용 프로그램의 Auth0 설정에 대한 자세한 내용은 README의 지침을 따르거나 이 blog post을 참조하십시오.

빠른 시작

NgRx 관련 섹션을 지원하는 기본 구조와 구성 요소가 있는 프레젠테이션 프로그램을 만들었습니다.
클론은 애플리케이션을 보여주고 starter 분기를 확인합니다.

git clone -b starter [email protected]:auth0-developer-hub/spa_angular_typescript_dashboard.git

클론 재구매 계약 후 spa_angular_typescript_dashboard을 현재 디렉토리로 설정합니다.

cd spa_angular_typescript_dashboard

설치 프로젝트의 종속 항목:

npm i

로컬에서 프로젝트를 실행하려면 다음과 같이 하십시오.

npm run start

개발 도구

Chrome이나 Firefox용 redux devtools 확장을 사용하여 스토리지와 관련된 작업을 디버깅할 수 있습니다.
이 확장자를 NgRx와 함께 사용하려면 프로젝트에 NgRx의 devtools 의존 항목을 추가해야 합니다.이 작업은 npm 또는 Angular CLI 를 사용하여 수행할 수 있습니다.npm 사용

npm install @ngrx/store-devtools --save

Angular CLI 사용

To use the Angular CLI, you will need to have the CLI installed globally. Refer to instructions on the Angular docs for how to set this up.

ng add @ngrx/store-devtools@latest

StoreDevToolsModule에서 AppModule을 가져오고 프로젝트 요구에 따라 설정합니다.이 강좌에서 기본 설정을 사용합니다.app.module.ts을 열고 다음 코드를 추가하십시오👇

// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

// ✨ New 👇
import { StoreDevtoolsModule } from "@ngrx/store-devtools";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { reducers, metaReducers } from "./core/state";
import { UserEffects } from "./core/state/user";
import { MenusEffects } from "./core/state/menus";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // ✨ New 👇
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

If you used Angular's CLI to add NgRx devtools, this part might have been updated automatically.

응용 프로그램을 실행하고 Devtools 열기

이 섹션의 절차에 따라 프로그램을 실행하면 도구 모음에서 Redux Devtools를 활성화하는 옵션이 표시됩니다.활성화되면 다음 그림과 같은 인터페이스를 볼 수 있습니다.

You can learn more about these features from their official documentation.

NgRx 설치

npm 또는 Angular CLI를 사용하여 NgRx 종속성을 설치할 수 있습니다.npm 사용

npm install @ngrx/store --save

Angular CLI 사용

ng add @ngrx/store@latest

너도 상점의 부작용을 처리하기 위해 NgRx의 효과를 사용할 것이다.이런 의존성을 첨가합시다.npm 사용

npm install @ngrx/effects --save

Angular CLI 사용

ng add @ngrx/effects@latest

At the time this post was written, the latest NgRx store and effects version was 12.2.0, which will be the version we will be using throughout the tutorial.

건축하다

이 응용 프로그램의 핵심은 관리 계기판으로 로그인한 사용자가 메뉴 항목을 추가, 편집, 삭제할 수 있다.로그인한 사용자는 해당 권한에 따라 모든 작업 또는 하위 세트 중 하나를 수행합니다.상태 업데이트와 사용자/서버 관련 이벤트를 관리하려면 NgRx를 사용하십시오.
애플리케이션에 대해 두 개의 스토리지를 생성합니다.

메뉴: 메뉴 관련 관리 기능(CRUD 작업)

사용자: Auth0

을 사용하여 사용자 관련 관리 기능(예: 인증
전체 강좌에서 쉽게 이해할 수 있도록 상점의 모든 부분을 단독 파일로 나눌 것입니다.
먼저 core 디렉토리에 다음과 같은 폴더 구조를 만들었습니다(각 섹션에 대해 논의할 때 각 파일을 업데이트할 것).

|- src/app/core
    |- state
        |- menus
            |- menus.actions.ts
            |- menus.effects.ts
            |- menus.reducer.ts
            |- menus.selector.ts
            |- menus.state.ts
            |- index.ts
        |- user
            |- user.actions.ts
            |- user.effects.ts
            |- user.reducer.ts
            |- user.selector.ts
            |- user.state.ts
            |- index.ts
        |- core.state.ts
        |- core.reducer.ts
        |- index.ts

The starter app is using a BehaviorSubject in menu-state.service.ts to manage it's state. This tutorial will walk you through migrating that to NgRx.

메뉴 상태 관리

메뉴 상태 만들기

메뉴의 상태 대상을 만드는 것부터 시작합니다.menus.state.ts을 열고 다음 코드를 추가하십시오👇
Read more...