Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@zaburo

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

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
11
Help us understand the problem. What are the problem?