Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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を選択する必要がある。
開発環境だけ有効にするとか対応が必要なようだけど、とりあえず以上です。

zaburo
こんにちは。自分用のメモをだらだら公開しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした