NGRXによる角度状態管理

25377 ワード

webdev javascript angular テキストリンク

状態管理は、ユーザーコントロールの状態を管理するプロセスです.高いアプリケーション性能を維持している間、開発者が重いデータ通信で大規模なアプリケーションを構築するのを援助します.
角度に関しては、NGRXとNGXsは州管理のための2つの最も使用されるライブラリです、そして、彼らは開発者の仕事を簡単にするいくつかのユニークな特徴を持っています.
この記事では、私はNGRXを紹介し、それを使用して簡単な角度のアプリケーションを作成する手順を歩いてください.

NGRXとは

NGRXウェブサイト
NGRXはReduxに触発され、開発者は、一方向のデータフローを実施することにより、オブジェクト内のアプリケーションの状態を簡素化することができます.

NGRXの使い方

NGRX状態管理プロセスは5つの主要要素の組み合わせです.

ストア:アプリケーションの状態がストア内で維持されます.それは不変です.

セレクタ:角度のコンポーネントは、ストアを購読することができますセレクタを介して更新を取得します.

還元器:1つの状態から別の状態への遷移を扱うための還元剤である.

アクション:リアクションを使用してストアの状態を変更します.

効果:効果は行動の結果です.また、それらは特定のアクションタイプを聞くために使用できます.

このプロセスは実装するために複雑であるが、アプリケーションが成長するときデータ通信に有用である.
そこで、我々は角度のアプリケーションでNGRXを使用する方法を見てみましょう.

角でNGRX店を使う方法

このチュートリアルでは、NGRXストアと角度を使用してブログ記事を管理する簡単なアプリケーションを実装する予定です.

ステップ1 : NGRXのインストール

NgRx NPM、糸、または角度CLIを使用してインストールできます.

// NPM
npm install @ngrx/store --save``// Yarn
yarn add @ngrx/store``// Angular CLI
ng add @ngrx/store@latest

ステップ2 :ストアの作成

インストール後、src/appディレクトリの下にある/ストアという別のディレクトリを作成する必要があります.このフォルダにはNGRXストアに関連するすべてのファイルが含まれます.ストアディレクトリのフォルダ構造は次のようになります.

-- app-- src-- app-- store
-- models-- actions
-- reducers

最初のステップとして、記事のインターフェイスを作成する必要があります.モデル記事を挙げましょう.モデル.TS

export interface Article {
  id: string;
  name: string;
  author: string;
  publisher: string;
}

次に、NGRXアクションを定義するアクションファイルを作成する必要があります.ここでは、記事という名前のファイルを作成しました.アクション.アクションフォルダの下のTSとNGRXストアからのインポートされた動作.

import { Action } from '@ngrx/store';
import { Article } from '../models/article.model';

export enum ArticleActionType {
  ADD_ITEM = '[ARTICLE] Add ARTICLE',
}

export class AddArticleAction implements Action {

  readonly type = ArticleActionType.ADD_ITEM;
  constructor(public payload: Article) {}

}

export type ArticleAction = AddArticleAction;

上記のアクションファイルでは、enumを使用して定数をアクションと定義しました.次に、NGRXアクションクラスからAddarticleActionクラスを実装しました.このクラスは、型とオプションのペイロードを2つ受け取ります.
今、我々は状態遷移で私たちを助けるために減速機を作成する必要があります.したがって、リダーズディレクトリ内でコースを作成します.還元剤TSファイルに次の内容を指定します

import { Article } from '../models/article.model';
import { ArticleAction, ArticleActionType } from '../actions/article.actions';

const initialState: Array<Article> = [
  {
    id: '1',
    name: 'Angular State Management with NgRx',
    author: 'Chameera Dulanga',
    publisher: 'SyncFusion'
  },
];

export function ArticleReducer(
   state: Array<Article> = initialState,
   action: ArticleAction
) {
   switch (action.type) {
     case ArticleActionType.ADD_ITEM:
       return [...state, action.payload];
     default:
       return state;
   }
}

上記の還元器では,入力インタフェースと入力パラメータとして状態と動作を受け入れるarticlereducerという還元関数の初期状態を作成した.アクションタイプがAddRange項目である場合、それは状態とペイロードを返します.さもなければ、それは状態を返すだけです.
ストア作成の最終段階では、すべてのアプリケーション状態を単一の場所に保つために別のモデルを作成する必要があります.ここでは、それを状態と名付けました.モデル.tsとそれは次のようになります.

import { Article } from '../models/article.model';

export interface State {
  readonly article: Array<Article>;
}

ステップ3：NGRXストアの登録

さて、角のアプリケーションでNGRXストアを登録する必要があります.これを行うには、アプリケーションに前の手順で作成された還元剤をインポートします.モジュールです.tsファイルをインポート配列に含める.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { StoreModule } from '@ngrx/store';
import { ArticleReducer } from './store/reducers/article.reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, 
    StoreModule.forRoot({
      course: CourseReducer,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

ステップ4 : NGRXストアを使う

AppModuleでストアを登録した後、コンポーネントで使用を開始できます.ここでは、AppComponentを使用して表示し、ストアに記事を追加します.

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { CourseItem } from './store/models/courseItem.model';
import { AppState } from './store/models/app-state.model';
import { NgForm } from '@angular/forms';
import { AddItemAction } from './store/actions/course.action';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {
  articles$: Observable<Array<Article>>;
  constructor(private store: Store<State>) {}

  ngOnInit(): void {
    this.articles$ = this.store.select((store) => store.article);
  }

  addArticle(form: NgForm) {
    this.store.dispatch(
      new AddArticleAction(form.value)
    );
    form.reset();
  }

}

上記のコードは、アプリケーションを示しています.コンポーネント.例のtsファイルです.そこで、我々は記事を得るために記事を$を観察して、ストアに予約しました.addArtill ()関数はストアに新しい記事をディスパッチします.
今、我々はアプリを変更する必要があります.コンポーネント.HTMLファイルを表示し、記事を作成します.

<section>
 <div class="container">
  <div class="row" style="margin-top: 5%;">
   <div class="col-md-12" style="text-align: center; margin: 5%;">
    <h2>My Articles</h2>
   </div>
   <div class="col-md-6">
    <div class="card p-4 shadow-sm">
     <form #myform="ngForm" (ngSubmit)="addArticle(myform)">
      <div class="form-group">
       <label for="name">Article Id</label>
       <input
         type="text"
         class="form-control"
         ngModel
         name="id"
         id="id"
         aria-describedby="identity"
         required
       />
      </div>
      <div class="form-group">
       <label for="title">Title</label>
       <input
         type="text"
         class="form-control"
         ngModel
         name="title"
         id="title"
         aria-describedby="title"
       />
      </div>
      <div class="form-group">
       <label for="author">Author</label>
       <input
         type="text"
         class="form-control"
         ngModel
         name="author"
         id="author"
       />
      </div>
      <div class="form-group">
       <label for="publisher">Publisher</label>
       <input
         type="text"
         class="form-control"
         ngModel
         name="publisher"
         id="publisher"
       />
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
     </form>
    </div>
   </div>
   <div class="col-md-6">
    <ul class="list-group">
     <li class="list-group-item list-group-item-primary" *ngFor="let article of articles$ | async">
      {{article.title}} <b>{{article.author}}</b>
     </li>
    </ul>
   </div>
  </div>
 </div>
</section>

それはすべてそこにある!我々は、角度アプリケーションでNGRXストアを正常に構成しました.この例の完全なコードを見つけることができますGitHub repository .

結論

ngrxは,角度管理における状態管理のための最も使用されるライブラリの一つである.私はこの記事はあなたのNGRXを使用して独自の角度のアプリケーションを作成するヘッドスタートを与える願っています.
読んでくれてありがとう!
SyncfusionのAngular UI component ライブラリは、アプリケーションを構築する必要があります唯一のスイート、65以上の高性能、軽量、モジュラー、応答性のUIコンポーネントを1つのパッケージに含まれます.
既存の顧客については、最新の不可欠なスタジオ版はLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 利用可能な機能をチェックアウトします.また、私たちのデモをチェックアウトGitHub .
あなたは私たちを介して私達に連絡することができますsupport forums , support portal , or feedback portal . 我々は常にあなたを支援して満足している!