Loading
BLOG 開発者ブログ

2019年12月21日

②Angular ngrx/entityでよくあるCRUD操作を簡単に書いてみる

この記事は アイソルートAdventCalendar2019 20日目の記事です。

こんにちは。

クラウドソリューショングループのokawa.mです。

 

今回はNGRXで便利なライブラリのngrx/entityについて解説していこうと思います。

 

①Angular ngrx/storeを分かった気になってみる ← 昨日の記事
②Angular ngrx/entityでよくあるCRUD操作を簡単に書いてみる ← 今日の記事

 

ngrx/entityとは

タイトルにもある通り、StoreのよくあるCRUD操作を簡単にしてくれます。

指定された型(EntityState)で定義することで使えます。

 

EntityState型の紹介

 

突然ですが、ユーザコレクションをStoreに保存したいとします。

どのように保存すればよいでしょうか?

 

一つはusersプロパティの下に配列で格納することです。

 

この方法は何点か問題があります。

特定のIDに基づいてユーザを検索する場合、コレクション全体をループする必要があります。
これは、非常に大きなコレクションには非効率です。

配列を使用することで、同じユーザの異なるバージョン(同じID)を配列に格納することも可能です。
よくないですね。

 

Storeの役割の一つは、データベース全体のインメモリクライアント側データベースとして機能することです。このデータベースから、Selectorを介してクライアント側のビューモデルを出力します。

ストアはインメモリデータベースであるため、インメモリデータベースに保存し、それらにプライマリキーに似た一意の識別子を与えるのがいいと思います。

次に思いつくのが、オブジェクト形式でコレクションを保存することです。

この形式により、ユーザをIDで簡単に検索できます。

無駄なループも必要なく、ユーザのidが被ることはありません。

ただし、問題が1つだけあります。

コレクションの順序に関する情報が失われました。
JavaScriptオブジェクトには順序保証がないからです。

コレクションの順序に関する情報を保存するために、配列を使います。

この形式で保存すれば、全ての問題が解決します。

 

長らく解説してきましたが、最後の形式をngrx/entityではEntityStateという型で定義してあります。

本当によく考えられた型です。

ngrx/entityではこの型情報を元にCRUD操作を行います。では実際のコードを見てみましょう。

サンプルコード

ほぼ公式のサンプルです。

また、今回は解説するのが多すぎるため、コンポーネント側のコードは解説しません。
ご了承くださいませ。

userModel

actions

Actionは特段難しいことはありません(列挙するだけですので)。

ngrx/entityではupdateではUpdate, EntityMap, 削除の一部ではPredicateという型を使用します。

EntityMapとPredicateは関数を引数として渡す特殊な型ですので、初めての方は一旦他のActionをマスターしてから触れるのをお勧めします。

reducer

reducerはngrx/storeでは登場しなかった、adapterが追加されています。

adapterはエンティティに対する操作のメソッドを提供します(Create, Write, Delete)。

また、adapterは便利なSelectorを提供します(Read)。

特にselectAllは便利で、EntityState型から配列の形に変換してくれるので、コンポーネント側では重宝します。

selector

Selectorはngrx/storeと変わっていません。

終わりに

ngrx/entityを使うと簡単にCRUD操作が実現可能です。

既存の型をEntityState型に合わせないといけないのが若干面倒なところではありますが、
その分のreturnはあると思います!!

是非NGRXを使っていて、ngrx/entityを使ったことがない方は試してみてください!!

 

明日22日目はyamazaki.hの「Realmの基礎知識 〜特徴と強みの再認識〜」です。よろしくお願いいたします。

参考

https://ngrx.io/guide/entity

https://blog.angular-university.io/ngrx-entity/