ReactNative react-loggerを使ってデバッグ

ReactNativeのデバッグは公式にもある通り、Webブラウザ上でブレークポイントを打ちながら可能ということで、かなり良心的な設計になっているのですが、さらにReduxフレームワーク開発を効率良くすすめるデバッカーモジュール「react-logger」というものがあったので紹介します。

メリット

Actonが発行される毎に、storeがもつ状態を常に変更前と変更後で詳細にコンソールに表示してくれる。また、どのアクションがどのような順番で発行されているかも一目瞭然であるためバグを発見しやすい。特にReduxフレームワークの場合、画面遷移毎にデバッグされるのはとても助かるように感じた。

導入方法

１．導入のためのパッケージ準備

$ npm install react-logger  // log出力モジュール
$ npm install react-thunk   // reduxの非同期処理を埋め込むモジュール

2.Storeの作成

import { createStore } from 'redux'; 

//reducerは各自で用意
const store = createStore(reducers);

以上のような通常のStoreの作成を以下のように置き換えます。

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

const middlewares = [thunk];
if (process.env.NODE_ENV === 'development') {
  const logger = createLogger();
  middlewares.push(logger);
}

// reducersは各自で用意
const store = compose(applyMiddleware(...middlewares))(createStore)(reducers);