Expo (React Native) で redux のデバッグに Reactotron を使う

React Native を Expo で開発しているとき、特に redux store のデバッグは、それ用のツールを入れないと厳しいものがある。 いくつかデバッガー系のツールを調べていくうち、例えば React Native の公式ページでは、 reactotron をデバッグツールとして紹介していたので、それを導入した際の備忘録。

特に、いくつものやってみた系の軽いイントロ的な記事だとか、ひとまず動かす方法などについて述べているものはちらほら見かけたが、

1. Reactotron はそのメイン開発者が述べているように、デバッグのためのツールなので、プロダクション用にビルドした際には、基本的に余計な動作をしないでほしい。
2. redux の store にうまく接続したい
   • redux toolkit で動かしたい
3. ついでに AsyncStorage まわりを適切に設定したい

を考慮したようなコードがいまいち見つからなかったので、それについてまとめてみる。

最終的なコード

// ReactronConfig.ts

import AsyncStorage from "@react-native-async-storage/async-storage"
import Reactotron from "reactotron-react-native"
import { reactotronRedux } from 'reactotron-redux'

const reactotron = Reactotron

if(__DEV__) {
  reactotron
  .configure()
  .setAsyncStorageHandler!(AsyncStorage)
  .useReactNative()
  .use(reactotronRedux())
  .connect()
}

export default reactotron

// store.ts

import { configureStore } from '@reduxjs/toolkit';
import Reactotron from './path/to/ReactotronConfig'

const store = configureStore({
  reducer: {
    // ...
  },
  // ...
  enhancers: __DEV__ ? [Reactotron.createEnhancer!()] : []
})
// ...

export default store

解説

1 のプロダクションでは利用しない方法について、よくある方法だと ReactronConfig.ts のファイル自体の import を、動的 import でするようにしながら、それを __DEV__ の値によって条件的に実行する方法がヒットする。 ただ、それをやりながら今度は 2 の redux の統合を行おうとすると、そのReactronConfig.ts のファイルを import しながら、そのメソッドである createEnhancer の戻り値を store の enhancer として指定しろ、という指示が出てくる。 実は、 reactotron-react-native のオブジェクトはシングルトンであることと、各 configure などのメソッドは client インスタンスの値を動的に変更していくコマンドなので、 __DEV__ の場合にだけもろもろの設定を行うようにしてやるので十分であったりする。

また 3 の Async Storage については、今 AsyncStorage の実装は community package への移行途中であり、それを提供するパッケージがプロジェクトによって変わりうるためか、明示的にその AsyncStorage オブジェクトを setAsyncStorageHandler にて指定してやる必要がある。(少なくとも自分の手元ではそうであった)

これらを満たそうと実装することで、上記に記載した設定コードになる。