45
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Fringe81Advent Calendar 2017

Day 25

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

Last updated at Posted at 2017-12-24

はじめに

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

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

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

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

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

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

スクリーンショット 2017-12-22 15.16.49.png

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つの方法があります。

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を開くと以下のようにまっさらな画面になっていると思います。

スクリーンショット 2017-12-07 16.43.39.png

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

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

スクリーンショット 2017-12-06 23.33.28(2).png

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

スクリーンショット 2017-12-07 16.46.02.png

おわりに

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

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

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

メリークリスマス!🎅🎄

45
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?