Expoを使ったReact Native開発でReduxのデバッグをする

Expoを使ったReact Native開発で、Reduxのデバッグを行う方法について。

React Native DebuggerにReduxのデバッグ機能があるのでこれを使う。

jhen0409/react-native-debugger

Macの場合、以下のコマンドでインストールできる。

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

続いてRedux Devtools Extensionのインストール。

$ npm i redux-devtools-extension -D

インストールが完了したら、Reduxのstoreを作成している部分を以下のように書き換える。特にミドルウェアを使っていない場合、applyMiddleware()の部分は省略可能。

// App.js

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

const store = createStore(
  AppReducer,
  composeWithDevTools(applyMiddleware(middleware)),
);
// ...

19001番ポートを指定してReact Native Debuggerを起動する。

$ open "rndebugger://set-debugger-loc?host=localhost&port=19001"

ターミナルを使わなくても、デバッガの新しいウィンドウを開けばポート番号を指定できる。

ここまでで準備は完了。アプリを起動する。

$ expo start

command + D でメニューを開き、一番下にある「Debug Remote JS」を選択する。これでReduxのデバッグができるようになる。

とても良い感じ。