I would like to enable Hot Module Replacement in my Web App, so I can speed up my development time.
I followed this article: https://duske.me/setting-up-hot-module-replacement-with-create-react-app-and-redux/
And i re-wrote my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider,connect} from 'react-redux';
import FirebaseConfig from './FirebaseConfig';
import firebase from 'firebase';
import configureStore from './configureStore';
firebase.initializeApp(FirebaseConfig);
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
and I have created a configureStore.js :
import {createStore,applyMiddleware} from 'redux';
import reducer from './reducers';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension' // REDUX DEVTOOLS
const configureStore = ()=> {
const store = createStore(reducer,composeWithDevTools(applyMiddleware(thunk)));
if (module.hot) {
module.hot.accept('./reducers/index', () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer);
});
}
return store
}
export default configureStore;
PS. 'reducers/index.js' is the file where I have a default export for my rootreducer (achieved by combining all reducers with combineReducers())
But nothing seems to work. Did I miss something ?