Learn React Redux with Project | Redux Axios REST API Tutorial | React Redux Tutorial For Beginners
ฝัง
- เผยแพร่เมื่อ 20 ก.ค. 2024
- 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.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
**Github link for Reference**
github.com/dmalvia/React_Redu...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
**Checkout these video to understand better**
JavaScript this Keyword - • JavaScript this Keywor...
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
🔥 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**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • JavaScript Tutorial Fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ 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.
![[TH] 2024 PMWC x EWC Group Stage Day 2 | PUBG MOBILE WORLD CUP x ESPORTS WORLD CUP](http://i.ytimg.com/vi/vwIQyCmNIBU/mqdefault.jpg)
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
Hi need help! Each hit cause double action.. i.e. SET_PRODUCTS, SELECTED_PRODUCTS etc. Called twice for each click. Please help in that
@@navpreetsingh8012 not sure but it can be strict mode that's causing that
Every think is working fine but after refershing the page
i am getting an error Uncaught TypeError: Cannot read properties of undefined (reading 'map')
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
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.
Dude, this video was an excelent way to remember how all of this works! Amazing work! Thank you!
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.
Glad it helped!
Thanks man, I've been searching a lot for a clear and clean tutorial about redux. Finally i got my doubts cleared from this video. Great work!!!
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.
Wonderful!
I watched three hours videos and understood nothing. This video is a very dynamic and very easy to understand
yeah. he is amazing teacher
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!!!
good to see that
Дуже наглядний посібник для вивчення Redux. A very clear guide to study Redux. Thanks.
this is the video which i have seen several times in recent days. The react, redux and your cool explanation deserve more than thanks..
I have watched several react redux video to get basic understanding and flow of redux but could not get it and the videos were very long , thank you for making this video. Sir you have made this video in such a way that it is so easy to understand. I would recommend this video to everyone who is learning react.Thank you sir !!
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
Glad to hear that!
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 !!!
Thanks a ton! Good to hear!
Yessss! very clear and I appreciate the folder structure you have. It is intuitive and well organized!
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={}
Thanks Fabrzy for adding this.
Thanks, bro for informing about Routes that we can use instead of Switch. Now my error has been resolved.
but does his git code working on your system?
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!
Awesome! Thank you!
Many many thumps up! Great and for that topic short tutorial with all what I need to start. It would be great if you can make a second part and explain more about how react and redux working together.
I have seen a lot of videos about redux everyone explaining only increment and decrement operations but after watched this, I got clarity about redux on larger applications and one more thing the way of explanation is too good enjoyed it keep rock bro😇
Oh its definitely Subbed my friend. Thanks for putting out great react-redux content. Marvelous!
Thanks for the sub!
Awesome! in 50 min you have been so clear! Now I got better React ideas. Thank you so much!
Great to hear!
Awesome video, Dipesh. You are great teacher, very clear in communication and code. Thank you for sharing.
Fantastic tutorial! This helped me learn a lot about using Redux with React.
Great to hear!
Thank you very much for this complete and practical tutorial. I was looking for a solution but no one explained it so well. Your friend from Iran ❤👌
You explained everything so well. Redux is complex but the way you teach makes it so much easier to understand. thankyou
Great tutorial! I was having a bad time learning Redux.
This has solved a lot of my doubts.
Subscribed :)
Thanks for the sub! Glad it helped!
Not one of the best, it is actually THE BEST REDUX VIDEO! Thank you for sharing your knowledge! Greetings from Serbia!
One of the most explanatory video on react redux. Thank you for providing such a good explanation. Eagerly waiting for redux-thunk video.
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.
Glad you enjoyed it!
me too :))
i realize it is kinda off topic but do anyone know of a good website to stream new series online?
@Calvin Lyle ehh I use flixportal. You can find it if you google:P -alvaro
@Alvaro Porter thanks, I went there and it seems like a nice service :D I really appreciate it!!
brooooo! thank you so much for the tutorials!!!! got my first dev gig because of you!
Great to hear!
in case you struggling with react-router-dom, they had updates, so you need to do it like that :
I just installed a version of rrd like on video )
getting error with switch, what should be used instead of it?
@@gauravpatil7977 use react-router-dom @5.2.0
@@zakazaka2957 replace with and replace the import too
thank you!
You are awesome man !!!! You made things very easy to understand. Completely impressed with your tutorials!
Thanks for such appreciation. The channel needs such words to grow.
This is one of the best video on Redux i have watched on youtube. Thanks a lot. Please create more project videos like this. Please create a project on making POST request to any api also (some CRUD operation application if possible so that data also persists after reload)
I really appreciate the way you explain about React Redux. Such a clarity video that every one needed. Take a bow
This video is an eye-opener for me thanks, buddy ......... waiting for more videos like this
Great job dude. This helps me a lot to understand react redux. Thank you.
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.
specifying the errors/bugs you encountered would help to give appropriate assistance
I belive this video is not for beginner level, before watching this we must have basic knowledge of redux. Moreover it felt like to learn a pattern to code with redux then the actual redux core concepts. So I recommend to watch any other video if we have no idea about redux or on how it works.
Nice video brother to understand redux from basic, keep it up👍
keep up the good work! your vids are helping a lot of student programmers!
Happy to hear that!
excellent....! 21 topo (21 cannons) ki salami apko.
I have come across many videos but this video done the job for redux. Well done bro keep it up
Glad to hear that
Great job. I really got mastery of the to and fro of how redux works. Thank you!
Glad it helped!
49:28 from here the knowledge was really valuable, it tells how to destroy the product when we move to another page good job! Learning never stops
Thanks ❤. Now I understand react redux proper from start to end. 🙏
Thank you so much, this tutorial you made has really is awesome
Glad it was helpful!
Thank you sooooo much....You have just cleared all my confusions about redux. Actually You make me learn Redux by this single video. salute
Thank you for your effort Dipesh! best video of all!
React redux you made so easy . I spent lot of time to understand react redux but this tutorial of u made it so easy . Thanks
Glad to hear that
This is an Awesome tutorial. I've learned a lot and it's very helpful. Thank you.
Best Video About Redux on YT
best redux tutorial ever. new subscriber
This video is so straightforward. I love it!
Thanks!
Outstanding tutorial, my friend!!!! Thanks a lot for the refreshment
Welcome Daniel!
Thank you sir, That is an amazing and clear tutorial, please upload more projects like this
Really helped a lot. A big RESPECT! 🌹
Very well explained about using redux in react app. Keep up the good work.. thanks.
superb video ! wao...
Awesome clear explanation..!!! you are a great teacher, thankx for sharing..!!! 😎👍
This video helps me to implement redux so easily, I cracked up so hard watching this is one of the best compilations I’ve seen the great video
Glad you enjoyed it!
Very useful vedio.Thanks
Nice Article, learnt basics about Redux.. thank you once again
Thank you, this explanation is very clear, even a begginner can grasp a lot in one go.
Great! Simple and very clear, thanks for sharing
Glad it was helpful!
i watched this video for tomorrow interview,Appreciate your efforts. It helped me to refresh my redux concepts. Thanks 🤩
This video and your way of explaining is very clear and simple. Thanks for amazing contents!
Great and one-shot video. The channel code evolution make me to understand redux and your channel make me how to use redux.
Thanks Dipesh Malvia,
For providing us the source code to study further and understand the concept by changing your source code.
Short and to the point video.
i am searching this type of video from a long time.
Thanks again.
It's my pleasure
the finest tutorial on redux. Thank You
Wow, thanks!
Best teaching mate just loved it
you have a loyal subscriber
Really like others says i also gone through lot of react tutorials but your this one is really stands up super bro.
Awesome! Thank you!
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 (
404 Not Found
);
}
PS: import what u have used
import { BrowserRouter, Routes, Route } from "react-router-dom";
That's why my code was not running thanks for great help
Got grip of redux because of you, thank you so much!
Every university requires Professor (Lecteror) like you!
so much confusion regarding redux but this time concept has been cleared,
Thank you!!!
You are most welcome, don't forget to Subscribe, like and share with friends.
sir you have solved my problem, your tutorial is really helpful thank you so much!
Your way of of teaching is too good .... than the other youtubers .... thanks bro :)
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.
Thank you for this amazing video, I was struggling to learn redux. but now I can say I know redux after watching this video.
i was surfing TH-cam for Redux for many das found this best
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";
404 Not Found!
Thanks for this solution, It's really helpful to me 🙂
Thanks for your clear explanation. :D
You're welcome!
Great explanation sir, you deserve more than thanks.
You are most welcome
Awesome.. Your teching way is pretty good
Thanks a lot.. this was so helpful to understand redux easily...-)
The best video on youtube for leaning redux. Thankyou.
Glad it was helpful!
Top-quality content!!
Nice Tutorial Dipesh, Really loved it. Can you guide on how to implement pagination with API ? i have server side pagination already implemented. Thanks
This redux tutorial was really helpful please keep up the hardwork and thanks for the great explaination
Glad it helped!
Wonderful tutorial. Can you make a video on dynamic html table, which means adding rows dynamic ally, updating and inserting the data.
Hi its really worth watching content. Will appreciate if you tell the VS shortcuts you use for switch case ,Auto import etc..
Anyone wants to learn redux just go for this vide. Nice explanation 🔥
Wow such a great course
Thanks for a wonderful tutorial and the other videos are very informative, I have another query "is there any advantages of moving from Redux to Apollo Client Cache?" any idea
Thanks much for such a wonderful video. Your explanation was awesome, now understand the Redux concept. Subscribed now 👍
Welcome aboard!
reading from docs was not that easy but u explained it in so easy way thank you sir
That's true I can imagine as at some point I had the same problem ☺️
Awesome 😍
bro this is one the best video.. all silver bullet point.. less than an hour E-commerce completed :P, keep it up bro proud of you :)
Thanks Senthil.
Dipesh this is an absolutly astonishing tutorial thanks!
Glad you liked it!😀
Thanks for the great video Dipesh. I have a small query like the UI is not showing immediately after the first load. I think this is because the store is not upto date when the component loaded. How can we solve this issue without using Middleware?
Wonderfull...Thanks for this.
Welcome!
Thank you so much. This is a great video for understanding redux even though every second of the video is knowledgeable.
the session is good, while using route you can explain what route is in single line, in similar way use can say about useeffect. so whenever you are adding something, just explain in single line to continue the session