redux-loggerの導入とオススメのLog出力設定の紹介 #JavaScript

こんにちは！
今回はredux-loggerの導入解説と自分がいつも最低限おこなっているLog出力設定の紹介をさせていただきます。

redux-logger
https://github.com/evgenyrodionov/redux-logger
https://www.npmjs.com/package/@jarvisaoieong/redux-logger

redux-loggerについて

redux-loggerは数あるredux middlewareの中で一番知られているものではないでしょうか。
簡単に説明させていただきますと、以下の画像のように
ActionがDispatchされる前後のstateとDispatchされたActionをconsole上に出力します。
意図したActionが発動しているか、その前後で期待したstateの変更が意図した通りに行われているかどうか
確認するためにはとても有用です。開発環境で導入されているという方は非常に多いのではないでしょうか？

導入方法

$ npm install --save redux-logger

または
$ yarn add redux-logger

index.js

import {createStore, applyMiddleware} from 'redux'

import logger from 'redux-logger'

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

かなり大雑把ですが、storeを以上のように設定して、reduxを用いた設計をおこなっていくと、
先ほどの画像のように、redux-loggerが適用されると思います。

redux-loggerのLogの出力設定について

ここからが、今回の記事の本題になるのですが、今回説明させていただいてるredux-loggerですが、かなり細かくlogの表示を設定することができます。ログの出力設定ができることについては結構知られていると思いますが、デフォルトの表示がかなり優れているので、そのまま利用している方が多いのではないでしょうか？今回は、自分が特に気に入っていて、すぐに実践できる設定を紹介させていただきます。

まず出力設定の方法ですが、以下のようにcreateLoggerをimportします。
そしてcreateLoggerを用いて適用したい設定を記述し,loggerを作成し先ほどと同じようにstoreに適用します。

index.js

import {createStore, applyMiddleware} from 'redux'
import { createLogger } from 'redux-logger'

const logger = createLogger({
      ここに任意の設定を記述
});

const store = createStore(
  reducer,
  applyMiddleware(logger)

設定できるoptionは以下の通りです(公式リポジトリより抜粋)

{
  predicate, // if specified this function will be called before each action is processed with this middleware.
  collapsed, // takes a Boolean or optionally a Function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
  duration = false: Boolean, // print the duration of each action?
  timestamp = true: Boolean, // print the timestamp with each action?

  level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level
  colors: ColorsObject, // colors for title, prev state, action and next state: https://github.com/evgenyrodionov/redux-logger/blob/master/src/defaults.js#L12-L18
  titleFormatter, // Format the title used when logging actions.

  stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  actionTransformer, // Transform action before print. Eg. convert Immutable object to plain JSON.
  errorTransformer, // Transform error before print. Eg. convert Immutable object to plain JSON.

  logger = console: LoggerObject, // implementation of the `console` API.
  logErrors = true: Boolean, // should the logger catch, log, and re-throw errors?

  diff = false: Boolean, // (alpha) show diff between states?
  diffPredicate // (alpha) filter function for showing states diff, similar to `predicate`
}

以上の項目があるのですが、最低限自分がいつも設定している項目は

collapsed
diff

の2つです。

collapsed

collapsed = (getState: Function, action: Object) => Boolean
非常に簡単に説明すると
collapsed:trueとすることで、ロググループを折りたたんで表示します。（デフォルトではfalse）
アプリケーションが大きくなってくると発行されるActionの数も次第に多くなっていき、
logがコンソールを埋め尽くし視認性が悪いと感じたことはないでしょうか.
そんな折には、この設定が有用だと僕は考えています。
デフォルトでは以下のように展開された状態で表示されますが、

collapsed:trueとすることで、以下のように折りたたまれた状態で表示されます。

diff

diff:true,
こちらはtrueとすることで、Actionの発行前後における、stateの差分を明示的に表示してくれます。
差分が明示的に表示されることでデバッグも捗るのではないでしょうか？
（以下参考例

diff部分抜粋

まとめ

簡単にまとめますと、私が最低限行う設定は以下です。

const logger = createLogger({
    diff:true,
    collapsed:true,
})

実際にはさらに細かく、出力の設定を行うことができますが、今回はすぐに設定できるものに限って紹介させていただきました。
需要がありましたら、他のOptionについても言及した記事を投稿したいと思います。
またよろしければ、みなさんが行っているオススメの設定などもコメントいただけたら幸いです。