React Native Debuggerを使ってみる

React Nativeで開発をする際 redux を使用することが多いと思う

そんな時に使うと開発が捗るのが React Native Debugger

インストール

github.com

$ brew update && brew cask install react-native-debugger

インストールが完了すると、アプリ一覧にアイコンが現れる

通常RNのアプリ上でリモートデバックをONにするとブラウザのデバッグコンソールが開くが

React Native Debuggerを立ち上げておくと、そっちにつながるようになる

ブラウザのデバッカーが立ち上がってる場合は先に閉じる

アプリをリロードしてちゃんとつながればOK

既にこれだけでもデバックコンソールとしての役割を果す

reduxのデバッグを出来るようにする

ベースとして適当なサンプルアプリを落としてそれに組み込んでみる

github.com

$ git clone https://github.com/react-native-training/react-native-redux-saga-example
$ yarn
$ react-native run-ios

起動画面

redux + redux-saga構成

ボタンを押すとAPIを叩いてデータを表示するだけのすっごいシンプルなデモアプリ

ここからが組み込み方

reduxのstoreの状態やactionを見るために

redux-devtools-extension というパッケージが必要になる

github.com

$ yarn add redux-devtools-extension --dev

ストアの初期化をしてる箇所のコードのミドルウェアのところにデバッガーを仕込むだけ

  const store = createStore(
    app,
    applyMiddleware(sagaMiddleware)
  )

↓↓

  import { composeWithDevTools } from 'redux-devtools-extension'

  const store = createStore(
    app,
    composeWithDevTools(applyMiddleware(sagaMiddleware))
  )

差分

react native debugger · rskull/react-native-redux-saga-example@1070ab4 · GitHub

デモ

これでイベントが起こる度にデバッガーで細かいやり取りを見れるようになった

発行されたaction、storeの差分やpayloadの中身が表示される

前の状態に戻ってリプレイなど、いろいろな事が出来るようになってすっごい便利

是非、導入してみてはいかかでしょうか

以上です