Learn React Redux with Project | Redux Axios REST API Tutorial | React Redux Tutorial For Beginners

In this video we are going to learn about React - Redux by build a project from scratch. This video course is specially if you are planning to learn React with Redux State Management library as a beginner. We will build a fake ecommerce store using fake APIs.
You will find the topics covered in the timestamp below.

***Github link for Reference***

⭐️ Support my channel⭐️

***React Roadmap for Developers in 2021***

***Checkout these video to understand better***

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:20 - Application Demo
0:01:33 - Pre-requisite packages installation and Setup
0:04:03 - Redux installation and Setup
0:04:30 - Understanding Redux Lifecycle Methods
0:05:09 - React/Redux Project Structure
0:04:45 - Understand React App Folder Structure
0:06:35 - Create Redux Action Types
0:07:50 - Create Redux Actions
0:09:55 - Create Redux Reducers
0:13:34 - Create Redux Store
0:14:52 - Add Redux Dev Tools
0:15:31 - Connect React with Redux
0:18:10 - Create React Components
0:21:38 - Add Routing to project
0:24:03 - useSelector to access state
0:28:39 - Use Axios for Redux API Call
0:31:15 - useDispatch to dispatch action
0:32:33 - Update the Redux Store
0:33:51 - Understand Redux Dev Tools
0:34:30 - Render products listing page
0:33:26 - Product Detail page
0:47:48 - Select and Remove Action Types
0:51:00 - Outro

***More videos***

***Checkout my crash courses for get started with web development***

🔗 Social Medias 🔗

⭐️ Tags ⭐️
- React Redux
- React Redux Tutorial
- React Redux Crash course
- React Redux Project
- React Redux For Beginners

⭐️ Hashtags ⭐️
#React #Redux #Beginners#Tutorials

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[toannew]

1:57 npm install axios
npm install react-router-dom
3:39 semantic ui
4:15 npm install redux react-redux
9:52 actions.js
15:03 redux dev tool extension
48:01 fix the problem of appearing the previous selected product

[geebsayshi]

I have watched tonnes of videos on react redux, I have to say this is one of the best. So captivating. It was a case of you blink you miss. There was no confusion. Everything was so clearly explained. 51 minutes with other videos was a lot but with this one it happened so fast. Thank you for everything. You got a new subscriber.

[fabrzy]

If anyone stumbles across this video now, the react-router-dom is now using {Routes} instead of {Switch} and as a parameter it doesn't accept component={} instead it's element={}

[akashsuna]

I have seen lots of youtubers just going through basics without going in depth practical implementation when it comes to redux but this tutorial really helps me grasping the most out of it

[oleksandrmykhailov]

in case you struggling with react-router-dom, they had updates, so you need to do it like that :

<div className="App">
<BrowserRouter>
<Header />
<Routes>
<Route path='/productlist' element={<ProductList />}/>
</Routes>
</BrowserRouter>
</div>

[rakibulhasanasif]

In 33:38 min, Don't get confused guys. just change,
This line,
const products = useSelector((state) => state);
to
const products = useSelector((state) => state.allProducts.products);
Thank me later. Maybe somehow that part was cut.

[mjbx]

So Smooth 😻
I thought react-redux is Hard to understand
But after watching this tutorial, it's not that much hard
Thanks!! Waiting.. for more Tutorials

[arielvardy]

I really enjoyed Dipesh's demeanor (calm, positive), and it was a solid walkthrough. That being said, I am really jealous of all these over-the-top positive comments. I didn't notice many explanations, mostly I was just told to copy his code. So if he explained stuff to the rest of yall that made redux made sense, I missed that part. As I did my best to follow, my code kept throwing errors and had different formatting, and I was at a total loss to understand where these errors came from. Not understanding the code made debugging difficult. I found myself copying his code provided as my debugging strategy, and at times, I was so lost, that somehow the bugs/errors persisted after I thought I had thoroughly replaced my code with his.

[chandukhaleja]

Dude, I can't believe I have gone through this video in a single go without any distractions. Such an awesome refresher video for redux and Thanks a lot. Keep coming up with more videos on React and Redux.

[currenttoff]

Thanks Dipesh, it was really good for refreshing my Redux concepts

If you are struggling with React Router V6 then just replace the code in App jsx with the below code and it will work for you


function App() {
return (
<BrowserRouter>
<Header></Header>
<Routes>
<Route path="/"
<Route
path="/product/:productId"

></Route>
<Route>404 Not Found</Route>
</Routes>
</BrowserRouter>
);
}



PS: import what u have used
import { BrowserRouter, Routes, Route } from "react-router-dom";

[umamaheshmeka]

Fantastic Dipesh !!! your teaching skills are really good. I have been a trainer from past 8 years, but couldn't find an easy way to explain redux. Finally, your 50 min video solved my problem. Thanks a ton !!!

[trishnangshugoswami]

Thank u so much, I went through a lot of videos, tutorials, and docs, but no one does any practical implementation like yours. It's very much helpful for me. The way you explain redux without throwing jargon is very very useful. The whole basics of redux is clear in my head now. Thanks a lot again for making awesome content.

[nooblearner]

if anyone get stuck with an error for 'Switch' & Route component..
1. Switch is no more supported by latest react-router-dom. Instead of switch now we got "Routes"
2. Component is deprecated by latest version of react-router-dom. Now it is element.
Code:

import {Route, BrowserRouter as Router, Routes } from "react-router-dom";

<Router>
<Header/>
<Routes>
<Route path='/'
<Route path='/product/:productId' element={<ProductDetail/>}/>
<Route>404 Not Found!</Route>
</Routes>
</Router>

[lyntechi]

I really enjoyed this video. You explained everything so well. Redux is complex but the way you teach makes it so much easier to understand. I have used redux in previous projects of mine but just needed a refresher. Thank you!!!

[ramakrishnapalli]

I have come across many videos but this video done the job for redux. Well done bro keep it up

[reyesdf]

thank you so much for the tutorials!!!! got my first dev gig because of you!

[sergiosotelo]

Dude, this video was an excelent way to remember how all of this works! Amazing work! Thank you!

[MrBoxsoumendu]

Was looking forward to a really well structured and straightforward material to learn Redux, and this is what I was expecting. Thanks a lot, Sir!!! Please do continue helping us.

[qwarlockz]

That was so cool! You are brilliant! It was fun! Entertaining! and really informative. I have subscribed and I look forward to watching a lot more of your videos!

[cristianmachuca]

Awesome! in 50 min you have been so clear! Now I got better React ideas. Thank you so much!