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

# はじめに

こんにちは。
巷には、[クリぼっち](https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%81%BC%E3%81%A3%E3%81%A1?lang=ja)という恐ろしい言葉があるそうですね。

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

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

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

と思ったとき、[Redux Logger](https://github.com/evgenyrodionov/redux-logger)を使ったり `console.log()`をするなど、色々方法があると思います。

今回お話する**[Reactotron](https://infinite.red/reactotron)**は、そういった確認作業を楽に実現してくれるかもな〜と思いました。

<img width="400" alt="スクリーンショット 2017-12-22 15.16.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/143848/b3a51fcb-b6e3-9ae5-faa4-369e3e5ffdfa.png">

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

![](https://survivejs.com/bf4a71a4fbcb78c0a7dd5ac5150607ab.gif)

CLI版もあるみたいです。

![](https://cdn-images-1.medium.com/max/1600/1*O5ECbeSdSRy_OclNZxULqQ.gif)

以下は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](https://github.com/infinitered/reactotron)ではスターが**7,000**以上ついています。

# きっかけ

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

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

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

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

# 使い方

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

今回は [React Native](https://facebook.github.io/react-native/docs/getting-started.html) × [Redux](https://redux.js.org/) という状況を想定して書きます。

## インストール

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

- [GitHubのリポジトリ](https://github.com/infinitered/reactotron)から直接ダウンロード
- brewを使う

### brewを使った方法は以下

 brewを最新にしておく

```
$ brew update
```

Homebrew Caskを利用してインストール（Homebrew Caskの詳しい説明については[こちら](https://qiita.com/ryurock/items/1432578d364985f6cb06)）

```
$ brew cask install reactotron
```

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

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

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

## Reactotron用のファイルを作成

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



```js: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アドレスを確認する方法は[こちら](https://pc-karuma.net/mac-ip-address/) )

## Reduxと統合

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

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

```js:Store.js
export default createStore(
	combineReducers({
    	nav,
        users,
        loginInfo,
        messages,
    }),
    applyMiddleware(
        thunk
    )
);
```

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

```js:Store.js
import Reactotron from "../ReactotronConfig";

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

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

```js:reactotron-redux/index.js
// call the redux create store
var store = redux.createStore(reducer, preloadedState, wrappedEnhancer);
```

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

# つかってみましょう

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

<img width="1024" alt="スクリーンショット 2017-12-07 16.43.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/143848/50e00ebf-22df-5050-4997-5ec8a26f6a10.png">


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


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

![スクリーンショット 2017-12-06 23.33.28（2）.png](https://qiita-image-store.s3.amazonaws.com/0/143848/1dab4afd-4d52-cbca-f59c-cccbbcbbfac1.png)

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

<img width="926" alt="スクリーンショット 2017-12-07 16.46.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/143848/51253829-e8b8-73af-b8f7-39d57c5040f4.png">



# おわりに

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

GitHubのissueにその方法が書いてあるので、興味がある方はのぞいてみてください。
**[Ability to show normal console.log() statements in Reactotron?](https://github.com/infinitered/reactotron/issues/298)**



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

メリークリスマス！🎅🎄