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を入れました。