React Redux tutorials for beginners-7

React-redux

Welcome to part-7 of the series. You can find part-6 here. We will learn to use logger middleware in a react-redux app and also to install and use redux devtool.

Logger Middleware

We had earlier seen how to install and use logger middleware in our redux application, now we will see the same in react-redux application.

The first step is to install the package, so open the terminal and install it in our react-redux application folder.

react-redux

Now, to use it we need to open our store.js file and do the below changes.

store.js

This logger middleware basically logs the log related to redux store. So, open up the application and the console.

After that click on Buy Egg button and now we can see the logs from the redux state changes.

Redux state changes

Redux Devtools

We will look into a great tool, which is very essential when you are building a react-redux application.

This is basically a browser extension, which is available for both chrome and firefox.

I am using firefox, so have installed the extension for firefox.

Redux devtools

The next step is to add the redux devtool extension to our react-redux application. The instruction are in this link. As per the instructions, we have to do a npm install.

npm install

So, stop the npm start and do the npm install in the terminal.

npm install

The next step is to use it in the store.js file. We do the necessary import and pass the applyMiddleware to composeWithDevTools.

store.js

After this restart the project with npm start. Open the console and select the redux devtool.

Redux devtool

Now, the initial screen shows the global state containing egg and chicken.

Egg

Now, when we click any button an action will be dispatched and shown in the other panel and the global state will also be changed.

Global state

Now, we can also see the different action transition, by clicking on the play button near the bottom.

Different actions

This completes part-7 of the series. You can find part-8 here.

You can find code till here in this github repo.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to participate in buying Hebe

Using fetch to update the database and DOM without refreshing the page

Don’t miss these things before learning JavaScript frameworks.

Stop sharing company personal data with Nextjs?

telemetry in nextjs

Mock Interview Q & A

How to use the TailwindCSS Aspect Ratio plugin

How to Add Font in Next.js

How to add Font in Next.js By Rajdeep Singh

day 2 of #1000daysofcoding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Develop Full-Stack web application using MERN Stack

How to Use Fusioncharts to Create Charts in ReactJS

ReactJS Tutorial Part #4 ~ ReactJS Components

Form Validation in React JS and React-Bootstrap without using any library