Master React Redux via Real world analogy & Building Project

  • Categories Video Courses
  • Duration 03h
  • Total Enrolled 8
  • Last Update March 16, 2022


In this course, you will Learn React Redux in the most simple way through real world example and

hands-on project based approach.

Following are the topics we will cover:

1.1-What is Redux

1.2-Redux real world explanation

1.3-Installing nodejs and VS code

1.4-Creating new react application

1.5-Code cleanup

1.6-Understanding React application flow and JSX

1.7-Installing the required npm packages

1.8-Redux lifecycle

1.9-Creating the required folders

2.1-Creating Actions and Action constants

2.2-Creating product reducer

2.3-Combine all reducers

2.4-Creating the product store

2.5-Redux DevTools and Provider

2.6-Creating components template files

2.7-Understanding the package json file

2.8-Creating and Understanding first react component

2.9-Creating skeleton for all other components

3.1-Implementing static and dynamic routing of components

3.2-Applying styling to components by inline style and css class

3.3-Accessing state information from store inside component

3.4-Designing the Product Component

3.5-Get Fake Product List in All Products component from API

3.6-Dispatch action from the component

3.7-Modifying the reducer to update the state information

3.8-Styling  and displaying all products on the home screen

4.1-Dynamic Navigation to Product Detail page on click of a product

4.2-Get Product Id from url and get product details from the API

4.3-Dispatch the selected product to the reducer and get it back in component

4.4-Styling Product Details page and showing data with conditional JSX

4.5-Adding routing on the logo

4.6-Remove the previous product and directly load the product on details screen

4.7-Exploring Action and State information on redux Dev Tools

You will learn about various react hooks.

You will get the complete source code for the course.

What Will I Learn?

  • You will learn the basics of ReactJS and component development
  • You will learn about Redux state management
  • You will learn about various React hooks
  • You will learn the skill of debugging, finding issue and fixing them
  • You will learn everything with real world examples and hands-on based approach
  • You will learn important ES6 concepts

Topics for this course

36 Lessons03h

Section 1: Introduction Setup and Installation

Lecture 1: Course Introduction1:04
Lecture 2: What is Redux2:08
Lecture 3: Redux real world explanation7:48
Lecture 4: Installing nodejs and VS code00:04:26
Lecture 5: Creating new react application00:03:08
Lecture 6: Code cleanup00:02:39
Lecture 7: Understanding React application flow and JSX7:51
Lecture 8: Installing the required npm packages00:08:58
Lecture 9: Redux lifecycle00:01:16
Lecture 10: Creating the required folders00:01:58

Section 2: Implementing Action Reducer and Store

Section 3: Working on Components and API data

Section 4: Routing Designing Dispatching Action

Section 5: Source code

Student Feedback


Total 1 Ratings

1 rating
0 rating
0 rating
0 rating
0 rating

Perfect course, simplified complex concept, thank you



  • Basics of HTML, CSS, JavaScript

Target Audience

  • Anyone who wants to learn about frontend development and want to become a true Frontend Developer