【React】redux-loggerでActionやStateのログを出力する
redux-logger
ReduxではRedux Middelwareという様々な機能拡張が有志の手によって提供されています（プラグインのようなものです）。これから紹介するredux-loggerもRedux Middlewareの一つであり、これを使えばRedux上のActionディスパッチやStateの変化を容易にロギングすることができます。
インストールも簡単で、他のツール同様npmを使うだけです。
$ npm install --save redux-logger
Usage
既存のアプリケーションに挿入する前提で説明します。
まずはreduxからapplyMiddlewareと、redux-loggerからloggerをインポートします（createStoreは後のStore作成用）。
import { createStore, applyMiddleware } from 'redux'; import logger from 'redux-logger';
次に、Store生成時に呼ばれるcreateStoreの第二引数にapplyMiddleware(logger)を追加します。applyMiddlewareはRedux Middlewareを有効化するのに必要であり、任意個数のミドルウェアを引数に取ることができます。今回はredux-loggerのみ必要なので、loggerを引数に渡しています。
const store = createStore(tasksReducer, applyMiddleware(logger));
これでOKです。アプリケーションを起動し、Actionが発生するたびにログが表示されていることがわかります。
拡張
redux-loggerは今のままでも様々な情報を取得できますが、より詳細なカスタマイズを行うことも可能です。下記リポジトリに詳細なUsage
が記載されているので、もしもっとloggerをいじって見たい人は参考にするといいかもしれません。
