Expo (React Native) で redux のデバッグに Reactotron を使う
Published: 2022/7/22
React Native を Expo で開発しているとき、特に redux store のデバッグは、それ用のツールを入れないと厳しいものがある。 いくつかデバッガー系のツールを調べていくうち、例えば React Native の公式ページでは、 reactotron をデバッグツールとして紹介していたので、それを導入した際の備忘録。
特に、いくつものやってみた系の軽いイントロ的な記事だとか、ひとまず動かす方法などについて述べているものはちらほら見かけたが、
- Reactotron はそのメイン開発者が述べているように、デバッグのためのツールなので、プロダクション用にビルドした際には、基本的に余計な動作をしないでほしい。
- redux の store にうまく接続したい
- redux toolkit で動かしたい
- ついでに 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
にて指定してやる必要がある。(少なくとも自分の手元ではそうであった)
これらを満たそうと実装することで、上記に記載した設定コードになる。
Tags: react-nativereactotronexpo
関連記事
React Navigation FAQ
2022/5/10