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

フロントエンド
2868 view

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

最終更新日:2018/06/24

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

ngrxとは
reduxとは
ngrxの構成要素
CLI
ディレクトリ構成
- - WINDII
  - 最新記事 by WINDII (全て見る)

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するだけ）

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

この記事を書いた人
最新の記事

WINDII

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

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

WINDIIテック