TypeScriptでもReduxのHMR対応しておきましょう

TypeScriptの6つめ。

HMRには3段階あって、非Reactアプリ、Reactアプリと続いて最後にReact+Reduxアプリに到達します。

// /store/Store.ts
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerReducer as router, routerMiddleware } from 'react-router-redux';
import { History } from 'history';
import { composeWithDevTools } from 'redux-devtools-extension';

import { app } from './AppReducer';

export default (history: History) => {
    const store = createStore(
        combineReducers({ router, app }),
        composeWithDevTools(
            applyMiddleware(
                routerMiddleware(history),
            ),
        ),
    );
    if (module.hot) {
        module.hot.accept('./AppReducer.ts', () => {
            const nextReducer = { router, app: require<{app: typeof app}>('./AppReducer').app };
            store.replaceReducer(combineReducers(nextReducer));
        });
    }
    return store;
};

もう派生論点なんでフルにコードは示さずとも、ポイントだけ。requireを使って更新Reducerを別名で読み込んで、store.replaceReducerを呼ぶことです。

上記コードではChromeプラグインのRedux DevToolsに対応させるため、react-router-reduxを入れました。