NgRx 8にて発生した「@ngrx/store: runtime checks are currently opt-in but ...」の警告の解決方法。

• facebook

オフィス狛 技術部のmmm（むー）です。

Angular8 + ngrx8を使用している担当プロジェクトで、ngrx/storeの警告がでているのが気になったので対処しました。

1. エラーメッセージの確認

@ngrx/store: runtime checks are currently opt-in but will be the default in the next major version with the possibility to opt-out, see https://ngrx.io/guide/migration/v8 for more information.

直訳：runtime checksは現在オプトイン形式がデフォルトですが、次のメジャーバージョンでオプトアウト形式になる可能性があります。詳細はサイトで確認してください。

これだけではさっぱりわからなかったので、メッセージに従いサイトを確認します。

2. ngrx バージョン8のアップデートガイド確認

色々書かれていますが、今回関連があるのは下記のようです。

A migration is provided to remove the usage ngrx-store-freeze, remove it from the package.json, and to enable the built-in runtime checks strictStateImmutability and strictActionImmutability.

直訳：ngrx-store-freezeの使用を取り除くマイグレーションが提供されます。package.jsonから削除して、ビルトインのruntime checks(strictStateImmutability とstrictActionImmutability)を有効にしてください。

要するに、ngrx7まではngrx-store-freezeを使用してStoreをimmutable(不変)にする必要があります。
しかし、ngrx8以上ではライブラリ不要になるので、runtime checksの値を設定してくださいとのことです。
弊社ではngrx-store-freezeを使用していませんが、同様にエラーが出ていました... とにかく設定しないといけないみたいです。

3. RuntimeChecksのページ確認

ページ内の記述方法を参考にstrictStateImmutabilityとstrictActionImmutabilityの値を設定します。
※ngrx-store-freezeを使用している場合は、設定している２つの項目はtrueにしてください。

// app.module.ts

StoreModule.forRoot(reducers),

  // ↓

StoreModule.forRoot(reducers, {
  runtimeChecks: {
    strictStateImmutability: false,
    strictActionImmutability: false
  }
}),

以上となります。
サイトに書いてあることをそのまま実行しただけですが、ngrxについて日本語で書かれているページがあまりないので、よければ参考にしてみてください。🍭

Angular , Ngrx