現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 2037 view

Angular6 + ngrxで堅牢で開発効率の高いアプリケーションを作る

最終更新日:2018/06/24

大規模なプロジェクトを始める時、reduxライクな状態管理を導入したいですよね。そこで今回はAngularの代表的な状態管理ライブラリであるngrxの紹介です。ngrxの構成要素を一通り説明した後、CLIコマンドをフル活用できる最強のディレクトリ構成(仮)を紹介します。

ngrxとは

reactを使ったことある方ならおなじみのreduxアーキテクチャをAngularのプロジェクトに導入するためのライブラリです。RxJSをベースに作られており、マスターすると非常に綺麗なコードが書けます(多分)。
すでにご存知の方は次のreduxとはの部分は飛ばしてください。

reduxとは

reduxのデータの流れ

構成要素

View

Viewは名前の通り見た目のことです。 View上でボタンが押されるなど、ユーザから何かしら入力や操作があった時、Actionが発行されます。

Action

Actionはデータのシンプルなコンテナの役割を果たします。Actionの種類(Todoを新規追加したなど)とデータ(新規追加されたTodoのタイトルなど)が表現されます。

Dispatcher

Dispatcherは発行されたActionをStoreに送る役割を果たします。絶え間なく送られてくるActionの窓口のようなものと考えると良いでしょう。

Reducer

Reducerは状態を変化させるための関数です。どんな関数かというと、dispatchされたactionと状態変化前のStoreを引数にとり、状態変化後のStoreを返す関数です。

Store

Storeはアプリケーションの状態を管理している場所です。

Reduxの三原則

  • Single source of truth
  • State in read-only
  • Changes are made with pure function

Single source or truth

reduxの特徴の一つにアプリケーションの全ての状態を一元管理しようというアプローチが挙げられます。どのような種類の状態であれ、状態をグローバルに管理しようというわけです。

State in read-only

アプリケーションの状態は基本的にどこからでも自由に参照できますが、書き込む場合はActionをdispatchする必要があります。

Changes are made with pure function

状態の変更は純数(pure)関数によってなされるというものです。

ngrxの構成要素

基本的にはreduxとはで説明した構成要素のままです。服作用を伴う処理を行うためのライブラリとして@ngrx/effectsが用意されています。APIを叩くときに頻出します。

CLI

Angularはschematicsという強力なcliツールを積んでいます。ngrxを構成要素は全てcliで雛形を吐き出せます。

Action

ng g action todo --collection @ngrx/schematics

実行結果:
todo.actions.ts

import { Action } from '@ngrx/store';

export enum TodoActionTypes {
  TodoAction = '[Todo] Action'
}

export class Todo implements Action {
  readonly type = TodoActionTypes.TodoAction;
}

export type TodoActions = Todo;

Reducer

ng g reducer todo --collection @ngrx/schematics
import { Action } from '@ngrx/store';


export interface State {

}

export const initialState: State = {

};

export function reducer(state = initialState, action: Action): State {
  switch (action.type) {

    default:
      return state;
  }
}

Effect

ng g effect todo --collection @ngrx/schematics
import { Injectable } from '@angular/core';
import { Actions, Effect } from '@ngrx/effects';


@Injectable()
export class TodoEffects {

  constructor(private actions$: Actions) {}
}

Container

ng g container todo --collection @ngrx/schematics

StoreがDIされたコンポーネントが生成されます。

ディレクトリ構成

ngrxを導入した時点でディレクトリ構造はreactのプロジェクトに寄せて行ってしまった方がいいと思います。
私の考える良いディレクトリは以下の通りです。

app/
 ├ components/
 ├ containers/
 ├ models/
 ├ pipes/
 ├ routes/
 ├ services/
 ├ store/
  └ actions/
  └ effects/
  └ reducers/
  └ app-store.module.ts

以下に開発のポイントをいくつか挙げます。

ngrxの構成要素はstore/配下にまとめる

/components配下にはステートレスなコンポーネントを置く

componentでserviceを直接呼び出さないようにする(あくまでcontainer componentでactionをdispatchするだけ)

いかがだったでしょうか?これが正解というわけではありませんが参考にしてみてください!

The following two tabs change content below.
riri

riri

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP