Setting Up HMR (Hot Module Replacement)

You’ve likely heard of hot module replacement at some point. If not, that’s okay. Let me explain.

Hot module replacement (HMR) exchanges, adds, or removes modules while an application runs, i.e., without the need for a full reload.

This is important to keep the application state while making changes, i.e. when a full reload would mean you lose these changes.

Generally, this can save valuable development time by only updating what’s changed instead of performing a full page reload.

Let’s set that up.

Updating the store setup and reducer HMR

Which of the Redux actors is concerned with computing and returning a new application state?

Yes, reducers. They take in the previous state and an action object. Then they return the new application state.

To set up HMR, we will first “exchange” the root reducer whenever it’s been recompiled, and tell the store to use the new version instead.

We keep everything the same. There are no full page reloads. Just replace the root reducer with the new version.

I know it sounds rather eccentric, but let me explain the steps to take.

Remember that invoking configureStore with an object of case reducers calls combineReducers internally.

configureStore({
  // combineReducers is invoked internally
  reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  }
})

Since we need a reference to the root reducer (to replace it via HMR), we need to create a root reducer that manually combines both finderReducer and ...