NGXS를 사용한 Angular의 상태 관리 - 1부

#NGXS를 사용하여 #Angular 애플리케이션의 상태를 관리하는 것이 얼마나 쉬운지 확인하고 Auth0의 SDK와 함께 NGXS를 사용하여 사용자 관련 기능을 처리하는 방법을 알아보세요.

소개

상태 관리는 애플리케이션을 구축할 때 핵심 구성 요소입니다. Angular 애플리케이션에서 상태를 관리할 수 있는 다양한 접근 방식이 있으며 각각 장단점이 있습니다.

이 블로그 게시물은 NGXS를 상태 관리 솔루션으로 사용하는 데 중점을 둘 것입니다. Recipe Admin Dashboard 애플리케이션을 구축하여 NGXS를 사용하여 애플리케이션의 상태를 관리하는 방법을 살펴보겠습니다. 또한 Auth0을 사용하여 애플리케이션을 보호하는 방법과 NGXS에서 작동하는 방법에 대해서도 알아봅니다.

NGXS란?

NGXS은 Angular용 상태 관리 패턴 및 라이브러리입니다. NGXS는 애플리케이션 상태에 대한 단일 정보 소스 역할을 하여 예측 가능한 상태 변경에 대한 간단한 규칙을 제공합니다.

NGXS는 NgRx 및 Redux와 같은 상태 관리 라이브러리에서 구현되는 패턴인 CQRS 패턴을 따라 모델링됩니다. NGXS는 이 패턴을 TypeScript의 클래스 및 데코레이터와 결합하여 최소한의 상용구로 상태 관리 라이브러리를 만듭니다.

NGXS는 어떻게 작동합니까?

NGXS는 Store, Actions, State 및 Select의 네 가지 주요 구성 요소로 구성됩니다. 이러한 구성 요소는 구성 요소에서 상점으로(작업을 통해) 다시 구성 요소로(선택을 통해) 단방향 순환 제어 흐름을 생성합니다. 아래 다이어그램은 NGXS에서 제어 흐름을 보여줍니다.

가게

NGXS의 Store는 상태 컨테이너에 작업을 전달하고 전역 상태에서 데이터 조각을 선택하는 방법을 제공하는 전역 상태 관리자입니다.

행위

작업은 애플리케이션에서 발생하는 고유한 이벤트를 나타냅니다. 작업은 애플리케이션이 NGXS의 Store와 통신하여 수행할 작업을 알려주는 방법입니다.

상태

상태는 상태 컨테이너를 정의하는 클래스입니다.

고르다

NGXS의 선택은 전역 상태 컨테이너에서 상태의 특정 부분을 분할하는 기능을 제공하는 기능입니다.

전제 조건

Angular에는 active LTS or maintenance LTS 버전의 Node.js가 필요합니다. Angular 응용 프로그램은 또한 많은 기능에 대해 npm packages에 의존합니다. npm 패키지를 다운로드하고 설치하려면 npm 또는 yarn 과 같은 npm 패키지 관리자가 필요합니다.

이 프로젝트에는 프런트엔드를 실행할 때 병렬로 실행해야 하는 서버 측 구성 요소가 있습니다. Api Express Typescript Menu repo 의 지침을 따르십시오. 여기blog post에서 Auth0으로 서버측 설정에 대해 자세히 알아볼 수 있습니다.

이 튜토리얼은 NGXS에서 Auth0을 사용하는 방법에 중점을 둡니다. Angular 애플리케이션에 대한 Auth0 설정에 대한 자세한 내용은 README의 지침을 따르거나 이 blog post를 참조하십시오.

빠르게 시작하기

NGXS 관련 부분을 구현하는 데 도움이 되도록 기본 구조와 구성 요소로 데모 애플리케이션을 만들었습니다.

데모 앱을 복제하고 시작 분기를 확인하십시오.

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

리포지토리를 복제한 후 현재 디렉터리spa_angular_typescript_dashboard를 만듭니다.

cd spa_angular_typescript_dashboard

프로젝트의 종속 항목을 설치합니다.

npm i

프로젝트를 로컬에서 실행합니다.

npm run start

The starter project contains an admin dashboard with the ability to log in and log out using Auth0's SDK. The logged-in user can then view the dashboard and view, add, edit, and delete a menu item depending on the user's permissions.

개발자 도구

상점 관련 작업을 디버깅하기 위해 Chrome 또는 Firefox용 확장 프로그램Redux devtools을 사용할 수 있습니다.

이 확장을 NGXS와 함께 사용하려면 NGXS의 devtools 종속성을 프로젝트에 추가해야 합니다. npm 를 사용하여 이 작업을 수행할 수 있습니다.

npm install @ngxs/devtools-plugin --save-dev

NgxsReduxDevtoolsPluginModule에서 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 { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";

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

    // ✨ New 👇
    environment.production ? [] : NgxsReduxDevtoolsPluginModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

앱 실행 및 devtools 켜기

이 섹션의 단계를 따른 후 앱을 실행할 때 툴바에 Redux devtools를 활성화하는 옵션이 표시되어야 합니다. 활성화되면 아래 이미지와 유사한 인터페이스가 있는 창이 표시됩니다.

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

NGXS 설치

npm 또는 yarn를 사용하여 NGXS의 종속 항목을 설치할 수 있습니다.

사용 npm

npm install @ngxs/store --save

사용 yarn

yarn add @ngxs/store

At the time this post was written, the latest NGXS store version was 3.7.2, which will be the version we will be using throughout the tutorial.

Read more...