はじめに
今回は、react nativeでReduxを使ううえで簡単にデバック可能なredux-devtools-expo-dev-pluginの紹介と導入手順を紹介していきます。
どんなことができるのか
redux-devtools-expo-dev-pluginを使用すると、存在するstoreの状態とその変化を確認できたり(下記画像参照)
rtk Queryを使用したweb APIリクエストのレスポンス、リクエストの詳細などを確認することができます。
storeをいじった際にいちいちconsole.logで確認する、といった手間がないので、非常に便利なデバックツールです。
導入手順
今回はRedux toolkitが導入されている前提で進めていきます。
1. パッケージのインストール
redux-devtools-expo-dev-pluginをプロジェクトにインストールします。
npm install redux-devtools-expo-dev-plugin
// yarn を使用する場合は↓
yarn add redux-devtools-expo-dev-plugin
configureStoreに設定する
configureStoreに、redux-devtools-expo-dev-pluginを使用するためのenhancersを追記します。
export const store = configureStore({
// 省略
enhancers: (getDefaultEnhancers) =>
getDefaultEnhancers().concat(devToolsEnhancer()),
});
もし、型エラーが出てしまう場合は// @ts-ignoreを一つ上の行に追記してみてください。
Expoアプリを立ち上げ、Dev toolsを選択
いつものこの画面が表示されたら、shiftz + mを押下します。
選択肢の中にOpen devtools plugin - redux-devtools-expo-dev-pluginがあったら導入は成功です！ 矢印キーでカーソルを合わせて起動します。
この画面が表示されれば、あとはデバックしていくだけになります。お疲れ様でした！
おわりに
redux-devtools-expo-dev-plugi もとい react native、まだまだ慣れないことは多いですがなかなか便利なもんですね。
また、便利なことや情報が少ないことにかんして記事にしていけたらいいなと思います...