[reactive]reactiontronを使用してデバッグ環境を構成する

反応帳を使ってアプリケーション開発を行う場合、基本的に使えるChrome開発者ツールも不便を感じなければよくわかりませんが、提供される情報が乏しく、シミュレータでモバイル開発者ツールを使うのも不便なので、デバッグ環境の追加構成が必要です.
今日インストールするReactotronもReactJSで利用できます.
RNでコンソールを使用したり、コードでエラーを指摘したりするなど、さまざまな機能をサポートしているので、デバッグ環境を構成します.

Reactotronが提供する機能

アプリケーションステータス

の表示

API要求及び応答表示

快速性能基準

サブスクリプション

一部アプリケーションステータス

console.logと同様のメッセージ表示機能

ソースマッピングスタックトラッキング(

sagaスタックトラッキングを含む)によりグローバルエラートラッキング

を実現する.

dispatch actions like a government-run mind control experiment

Reduxまたはmobx-state-treeホットスワップステータス

を使用

イベント

の追跡

React Native表示画像被覆率

React Nativeから非同期ストレージ

を追跡

Reactotronのインストール

reactoronアプリケーションをインストールするには、ターミナルに次のコマンドを入力します.
OSはmac、homebrewは3.4.6バージョンで、--caskオプションでGUIアプリケーションをインストールできます.

brew install --cask reactotron

正常にインストールされている場合は、アプリケーションフォルダにReactotronをインストールします.appはすでに生成されているはずです.

Reactotronの適用

Reactronが正常にインストールされている場合は、Reactronをプロジェクトにバインドできます.
次のコマンドを実行し、React NativeとReactRonが連携するようにパッケージをインストールします.

npm i --save-dev reactotron-react-native

パッケージがインストールされている場合は、プロジェクト内にReactotronConfig.jsファイルが作成されます.
Reactotronの公式文書には次のように書かれています.

import Reactotron from 'reactotron-react-native';

Reactotron.configure() // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from // controls connection & communication settings
    .useReactNative() // add all built-in react native plugins
    .connect(); // let's connect!

その後、App.jsまたはindex.jsのような根源にReactotronConfig.jsを装着すると、アプリケーションは終了する.

import Reactotron from 'reactotron-react-native';

if (__DEV__) {
    import('./ReactotronConfig').then(() => Reactotron.log('Reactotron Configured'));
}

以上のコードをすべて適用した後,アプリケーションを構築して実行し,Reactotronも同時に実行する.
Reactotronへ'Reactotron Configured'このような文が表示されていると、それは正常に連動します.
ただし、Androidアプリ構築時に誤って設定が完了していないが、AndroidシミュレータとReactotronで使用されている9090ポートにバインドされていない場合は、接続されていない可能性があります.
このとき、package.jsonによって以下のように記述される.

"scripts": {
    "android": "adb reverse tcp:9090 tcp:9090 && react-native run-android",
    ...

その後、npm run androidコマンド言語でアンドロイドシステムで構築して実行すると、正常に動作します.

ReactotronをReduxにバインドする

現在進行中のプロジェクトはstoreとしてredixを使用しています.
Reactotronでは、このReduxストアで発生した操作など、ステータスの変更を確認できます.
そのため、まずプロジェクトにReactronとRedux連動パッケージをインストールします.

npm i --save-dev reactotron-redux

インストールが完了すると、次のように変更されます.

import Reactotron from 'reactotron-react-native';

import { reactotronRedux } from 'reactotron-redux';

const reactotron = Reactotron
    .configure() // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from // controls connection & communication settings
    .use(reactotronRedux()) // set Redux(추가)
    .useReactNative() // add all built-in react native plugins
    .connect(); // let's connect!

export default reactotron;

以下に、redoxstoreを生成するReactotronConfig.jsによって記述されたコードを以下に修正する.
このプロジェクトはcreateStore(...)にあります.

//before
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './modules';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

//after
import { createStore, applyMiddleware, compose } from 'redux'; //compose 추가
import thunk from 'redux-thunk';
import Reactotron from '../../ReactotronConfig'; //added

import rootReducer from './modules';

const store = createStore(rootReducer, compose(applyMiddleware(thunk), Reactotron.createEnhancer())); // create store with reactotron

export default store;

thunkのような追加のミドルウェアをreduxに適用している場合は、./store/index.jsをreduxからインポートし、上記のコードのように複数のミドルウェアを組み合わせて作成するショップに適用できます.