Delve into Redux Toolkit to streamline Redux development with best practices. Gain insights into creating stores and reducers, and build TweetFind, a Twitter search app, for your portfolio.

data.tar.gz

main-branch

ice-creamy-completed

tweetfind-completed

Learn Redux toolkit (RTK) which highlights the new redux best practices and the new standard of developing applications. With RTK, redux development is more efficient and easier to understand.

Redux toolkit brings the much-needed simplicity you’ve longed for in your redux development. It has out-of-the-box support to handle common use cases such as creating the redux store, creating reducers, handling immutable update logic, and much more.

At the end of the course, you will build tweetfind, a Twitter search application. This will be a great addition to your portfolio.

Intermediate Redux with Redux Toolkit

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.  

```js
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 `numberOfResultsReducer`. 

```js
// app/rootReducer.js (newly created file)
import { combineReducers } from "@reduxjs/toolkit";

import finderReducer from "../features/finder/finderSlice";
import numberOfResultsReducer from "../features/numberOfResults/numberOfResultsSlice";

// call combineReducers manually
export const rootReducer = combineReducers({
  finder: finderReducer,
  numberOfResults: numberOfResultsReducer,
});
```

Essentially, we create a new file `rootReducer.js` and take matters into our hands, thus creating the root reducer.

Now, instead of passing an object of case reducers to `configureStore`, we’ll pass the single root reducer as follows: 

```js
// app/store.js 
import { configureStore } from "@reduxjs/toolkit";
// import root reducer
import { rootReducer } from "./rootReducer";

const store = configureStore({
  // see this 👇
  reducer: rootReducer,
  devTools: {
    name: "TweetFind",
  },
});
```

This is great. The app will work just like before. The only difference here is we’ve chosen to pass a root reducer ourselves instead of letting `configureStore` call `combineReducers` internally.

With this done, we should set up the HMR logic. Brace yourself! 

```js
// app/store.js 

... 

if (process.env.NODE_ENV === "development" && module.hot) {
    module.hot.accept("./rootReducer", () => store.replaceReducer(rootReducer));
  }
```

I know I just dumped a likely confusing block of code, so here’s the explanation for what’s going on. 

Firstly, HMR isn’t intended for use on production, so we check to confirm we’re in development mode.  

```js
if (process.env.NODE_ENV === "development" && module.hot) {

}
```

And what on earth is `module.hot`? 

It’s difficult to explain this in great detail without going into the internals of [Webpack](https://webpack.js.org/), but I’m going to try to keep it simple. To have HMR work as expected, the webpack development server must have the [HMR feature enabled](https://webpack.js.org/configuration/dev-server/).  This is done like this: 

```js
// webpack.config.js
module.exports = {
  //see this 👇
  devServer: {
    hot: true
  }
};
```

With this enabled, `module.hot` will contain an object with values and methods for working with HMR. 

![The module.hot object logged to the console](/api/collection/5191711974227968/6298082644328448/page/5857539097362432/image/5135885304070144)

You don’t really have to worry about this, except you’re setting up your webpack configuration object. 

One of the methods in the `module.hot` object is `accept`.  This accepts a path to the module to be “exchanged” and a callback to perform actions when the module is recompiled. 

```js
module.hot.accept("./rootReducer", () => {
    // perform action
});
```

In our case, we will take advantage of the `store.replaceReducer` to pass exchange to the old root reducer while grabbing the latest reducer via `rootReducer`.  

```js
...
module.hot.accept("./rootReducer", () => store.replaceReducer(rootReducer));
```

That’s it! 

Essentially, we are reimporting the new version of the root reducer function whenever it's been recompiled and telling the store to use this new version instead.

# React component tree HMR

> *Fast Refresh* is the official solution to all Hot Reloader(Hot Module Replacement) alternatives for React. Create-react-app 4.x has *Fast Refresh* enabled by default which loads the updated React components in the browser without reloading the complete page, hence, keeping the state intact. It is recommended to use *Fast Refresh* by create-react-app, however, this section explains the Hot Module Replacement using redux as this feature is still available at the [official Redux website](https://redux.js.org/usage/configuring-your-store#hot-reloading). This section can be skipped if you are not looking for Hot Module Replacement via redux. 
 
As with the root reducer, we can hot-reload the React component tree whenever a component file changes too. 

Don’t worry. It’s not as complicated as it seems. 

Similar to what we’ve done with the root reducer, the best way to go about this is to have a root `App` component. This will be the main component that renders other components in the application tree. 

We already have this in `App.js`. Amazing! 

Now, we need to wrap the rendering of the root application component in a function. Let’s call this `render`:

```js
// index.js

// before 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// now 
const render = () => {
  // same trick as before 👇
  const App = require("./App").default;

  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );
};
```


For the application to be rendered, we have to invoke the render function: 

```js
// index.js 
...
render()
```

All good! Now, let’s move on to the HMR bit.

We want to control when the `render` function is called. We will do this when the `App` module is being recompiled. Thanks to `module.hot.accept`, we can do the following: 

```js
// index.js 
if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept('./App', render)
}
```

Now every time there’s a change in the component tree, and when `App` is being recompiled, we will go ahead and reuse the `render` function.

First, we call `render` on startup to show the React component tree as usual, and then reuse that function any time a component is changed.

It has been a long discourse on HMR, but we’ve got it all done now!

Learn to set up hot module replacement in your Redux toolkit application.

What is Redux Toolkit and Why Use it?

Building Your First Redux Toolkit Application

Challenge on Building Your First Redux toolkit Application

RTK Deep Dive: Build a Twitter Search Application

Conclusion: Where to Go From Here

Appendix

Setting Up HMR (Hot Module Replacement)