Works by

プログラミング等IT技術関連でメモする

【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が発生するたびにログが表示されていることがわかります。

f:id:rennnosukesann:20180520142711p:plain

拡張

redux-loggerは今のままでも様々な情報を取得できますが、より詳細なカスタマイズを行うことも可能です。下記リポジトリに詳細なUsage が記載されているので、もしもっとloggerをいじって見たい人は参考にするといいかもしれません。

github.com