ReactとReduxのためのChrome拡張機能

さらに昨日の続き。

chrome.google.com

かねてよりChrome拡張機能でReactアプリケーションのリアルタイムコンポーネント構造を見るためのReact Developper Toolsを用いていましたが、HMR環境でも問題なく活用できています。HMRで部分再描画ができてる時にはToolsで表示しているコンポーネントのツリーも部分再描画されるだけなので快適度があがりました。

chrome.google.com

ReduxのStoreの状態をリアルタイムに見るためのChrome拡張機能は今回はじめて入れました。

// Store.js
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { routerReducer as router, routerMiddleware } from 'react-router-redux';
import { reducer as form } from 'redux-form';

import app from './AppReducer';
import moveToMiddleware from './MoveToMiddleware';

/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
/* eslint-enable */

export default (history) => {
    const store = createStore(
        combineReducers({ app, router, form }),
        composeEnhancers(applyMiddleware(moveToMiddleware, routerMiddleware(history))),
    );
    if (module.hot) {
        module.hot.accept('./AppReducer', () => {
            store.replaceReducer(combineReducers({ app, router, form }));
        });
    }
    return store;
};

React Developper Toolsはアプリのソースコード側で何もする必要ありませんでしたが、Redux DevToolsはちょっとだけ必要。インスペクション用にStoreEnhancerを入れますが、私はアプリのほうでMiddlewareを入れているのでインスペクション用のcomposeでラップして差し込むようにします。

HMR環境をまったく阻害しません。こちらもとても有用です。

eslintの部分的な抑制を行う方法

/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
/* eslint-enable */

今回のRedux DevToolsのReadmeで上記のような抑制方法をしりました。行レベルで設定を変えられる方法探したこともあったのだけど見つけられてなかった。これまでは以下のようにしていました。

/* eslint no-underscore-dangle: 'off' */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

終端が定められてなかったので、同じJSファイルの最後まで設定を変えてしまうのが嫌だったのですが、これからは全部eslint-disable & eslint-enable の方法で書きます。