【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をいじって見たい人は参考にするといいかもしれません。