HMRの完成度アップ、ReducerのHMRも

昨日までで完成かと思ってたら、さらに続きが！

HMR環境で開発してたら、react-reduxのProviderコンポーネントが以下の警告をブラウザのstdoutに出してました。

does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

ReduxもHMRできてましたか。昨日まではreactとreact-routerのスタックについてはHMRが完成していましたがさらにreduxのとこも。上記の警告中URL先のリリースドキュメントは日付が2015年8月ですからwebpackも古くrequireを用いたモジュール更新を必要としてましたが、webpack3の今ではもっとシンプルに書けます。

// Store.jsx
import { createStore, combineReducers, 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';

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

Reducerはステートレスだからホットに入れ替えてもアプリケーションの再描画が走らない！さらにとても素晴らしい動きになりました。reducerの取り替えだけなのでMiddlewareを書き換えると全画面再描画が走ります。