はじめに

こんにちは。
巷には、クリぼっちという恐ろしい言葉があるそうですね。

閑話休題、React × Reduxでアプリケーション開発を行うときに便利かもしれないデバッグツールを見つけたので、そのお話です。

Reduxライブラリを用いたアプリケーションの開発中に、

storeの状態を好きな時に確認したい
dispatchされたactionの種類を確認したい

と思ったとき、Redux Loggerを使ったり console.log()をするなど、色々方法があると思います。

今回お話するReactotronは、そういった確認作業を楽に実現してくれるかもな〜と思いました。

Reactotronは、Reduxのstoreやactionの確認やAPI通信のログをグラフィカルに表示してくれるデスクトップアプリケーションです。

CLI版もあるみたいです。

以下はReactotronの開発者による説明です。

If the app you’re building had a Twitter feed, it’d be Reactotron. It streams to you information about your app’s state, API calls, benchmarks, exceptions, and other stuff.

Reactotronはツイッターフィードのようなものだ。stateやAPIリクエストやベンチマークやエクセプションなど、Reactotronはアプリケーションのあらゆる情報を流れしてくれる

v1.0.0のリリースは2016/8ですが、すでにGitHubではスターが7,000以上ついています。

きっかけ

Reactotronを使いはじめるまで、私はReduxにこんな感じで翻弄されていました。

「あれ、たくさんあるactionのうちどれがdispatchされたんだ？」
「いまstateってどんな状態だっけ？」
「console.log して調べなきゃ… 」

そうこうしているうちに無数の console.log がプロジェクト内に散らばり、
見づらいコンソール画面でいちいちログを確認するという状況に。。

結構面倒臭いんですよねこの確認作業。
と思って色々調べていたら、Reactotronを見つけました。

使い方

※前提
Reactotronは、React（React Native）を利用したプロジェクトのために作られています。
プロジェクトに取り込むとAPIリクエストなどをグラフィカルに見ることができますが、その上で Reduxというライブラリと統合すると最強の威力を発揮するというものです。

今回は React Native × Redux という状況を想定して書きます。

インストール

アプリのインストールには2つの方法があります。

GitHubのリポジトリから直接ダウンロード
brewを使う

brewを使った方法は以下

brewを最新にしておく

$ brew update

Homebrew Caskを利用してインストール（Homebrew Caskの詳しい説明についてはこちら）

$ brew cask install reactotron

ただデスクトップアプリをインストールしただけでは何も起きないので、プロジェクトにもReactotronをインストールします。
インストールするライブラリは、React Native用のライブラリと、Reduxと統合するためのライブラリの2つです。

// 開発時のみ必要なので、devDependenciesにインストール
$ yarn add -D reactotron-react-native reactotron-redux

インストール作業は完了です。

Reactotron用のファイルを作成

次にReactotronを利用したいプロジェクトにソースコードを記述していきます。
ファイル名はなんでも構いませんが、Reactotronの設定をするためのファイルを用意しましょう。

ReactotronConfig.js


import Reactotron from "reactotron-react-native";
import {reactotronRedux} from "reactotron-redux";

export default Reactotron
    .configure({name: "projectname"}) // Reactotronに表示するアプリ名
    .configure({ host: "IPAddress" }) // ローカルIPアドレスの登録
    .use(reactotronRedux()) // Reduxと統合することを宣言
    .connect(); // おまじない的な
};

私は最初、ローカルIPアドレスの記述を忘れていて数時間無駄にしました、、、
(macで自分のローカルIPアドレスを確認する方法はこちら )

Reduxと統合

最後にReduxのstoreと統合を行います。

あくまで私の書き方ですが、storeをこんな感じで作っているとします。

Store.js

export default createStore(
    combineReducers({
        nav,
        users,
        loginInfo,
        messages,
    }),
    applyMiddleware(
        thunk
    )
);

そこに、さきほど作ったReactotronConfig.jsで諸々設定したReactotronをインポートします。

Store.js

import Reactotron from "../ReactotronConfig";

export default Reactotron.createStore( // ReactotronのcreateStoreメソッドに書き換える
    combineReducers({
        nav,
        users,
        loginInfo,
        messages,
    }),
    applyMiddleware(
        thunk
    )
);

ReactotronのcreateStore は内部で ReduxのcreateStore を呼んでいるので、storeはこれまで通りの動きをしてくれます。

reactotron-redux/index.js

// call the redux create store
var store = redux.createStore(reducer, preloadedState, wrappedEnhancer);

以上で全ての準備が完了しました。

つかってみましょう

Reactotronを開くと以下のようにまっさらな画面になっていると思います。

好きな方法でプロジェクトをビルドしてください。

すると、
ACTIONの中身を確認できたり👇

storeを好きな時に確認することもできるようになります👇

おわりに

ここまでくると、ログの確認はReactotronで完結させたくなりますよね。
たとえばconsole.logとかも。

GitHubのissueにその方法が書いてあるので、興味がある方はのぞいてみてください。
Ability to show normal console.log() statements in Reactotron?

Reactotronを含め、様々なツールでを使って快適な開発環境を作りたいですね。

メリークリスマス！🎅🎄

【Reactotron】React × Reduxの開発にオススメのデバッグツール