React(Redux)のディバッグ環境を整える

デバッグ環境の整え方のメモ。

React

いくつかやり方がありますが、ChromeのExtension使うのが一般的。

React Developer Tools

特に何も難しいことはない。インストールして、Reactが使われてるサイトを見れば、stateとの中身とか見れます。

Redux + Redux

こちらもいくつかのツールが存在しますが、React DevTools Extensionを利用するのが一般的な感じ。但し、Chromeにツールを入れただけでは何も見えず、コードの中に必要な記述を行う必要がある。

コードはcreateStore()に埋め込むが、middlewareを利用するかによって記述が異なる。
以下はミドルウエアを利用する場合の記述。

どちらも覚えるのめんどいので、私は下記で統一しています。

私はcreateStoreってファイル作ることが多いのですが、下記のように記述しています。

import { createStore as reduxCreateStore, applyMiddleware, combineReducers, compose } from "redux";
import { todoReducer } from "./reducers/Todo";

//for Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function createStore() {
    const store = reduxCreateStore(
        combineReducers({
            todo: todoReducer,
        }),
        composeEnhancers(applyMiddleware(
            //thunk,
        ))
    );

    return store;
}

ReactNative + Redux

次にRactNativeの環境。これもいくつかの方法があるようだが、remoteデバッグ専用のツール（コード側）を利用する。

まず、デバッグしたいプロジェクトにツールをインストールする。

npm install --save-dev remote-redux-devtools

Reactのときと同様にcreateStore()内に利用のための記述を追加する。
こちらもMiddlewareがあるかないかで記述が異なる。

import { createStore as reduxCreateStore, combineReducers, compose, applyMiddleware } from "redux";
import navReducer from "./reducers/navReducer";
import userReducer from "./reducers/userReducer";

import composeWithDevTools from 'remote-redux-devtools';

export default function createStore(){
    const store = reduxCreateStore(
        combineReducers({
            nav: navReducer,
            user: userReducer
        }),
        composeWithDevTools(applyMiddleware(
            //thunk
        ))
    );
    return store;
}

デバッグツールはChrome Extensionがそのまま利用できるが、Open Remote DevToolを選択する必要がある。
開発環境だけ有効にするとか対応が必要なようだけど、とりあえず以上です。