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.
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.
Пікірлер: 771
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
@navpreetsingh8012
2 жыл бұрын
Hi need help! Each hit cause double action.. i.e. SET_PRODUCTS, SELECTED_PRODUCTS etc. Called twice for each click. Please help in that
@212aleksa
Жыл бұрын
@@navpreetsingh8012 not sure but it can be strict mode that's causing that
@JaiShreeRam5964
Жыл бұрын
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
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={}
@DipeshMalvia
2 жыл бұрын
Thanks Fabrzy for adding this.
@samriddhichhetri5783
2 жыл бұрын
Thanks, bro for informing about Routes that we can use instead of Switch. Now my error has been resolved.
@hirensoni7636
7 ай бұрын
but does his git code working on your system?
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!
Yessss! very clear and I appreciate the folder structure you have. It is intuitive and well organized!
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!!!
Дуже наглядний посібник для вивчення Redux. A very clear guide to study Redux. Thanks.
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.
@DipeshMalvia
2 жыл бұрын
Glad it helped!
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!!!
@cpwithtausif4866
2 жыл бұрын
good to see that
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 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.
@DipeshMalvia
2 жыл бұрын
Wonderful!
@brianryan4053
2 жыл бұрын
I watched three hours videos and understood nothing. This video is a very dynamic and very easy to understand
@Sergio-di1jt
2 жыл бұрын
yeah. he is amazing teacher
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 !!
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.
Awesome video, Dipesh. You are great teacher, very clear in communication and code. Thank you for sharing.
You explained everything so well. Redux is complex but the way you teach makes it so much easier to understand. thankyou
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😇
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 ❤👌
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 !!!
@DipeshMalvia
2 жыл бұрын
Thanks a ton! Good to hear!
in case you struggling with react-router-dom, they had updates, so you need to do it like that :
@zakazaka2957
2 жыл бұрын
I just installed a version of rrd like on video )
@gauravpatil7977
2 жыл бұрын
getting error with switch, what should be used instead of it?
@MihirBaidya
2 жыл бұрын
@@gauravpatil7977 use react-router-dom @5.2.0
@ahmedragab-sd5jy
2 жыл бұрын
@@zakazaka2957 replace with and replace the import too
@KeeganLeary
2 жыл бұрын
thank you!
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
@DipeshMalvia
3 жыл бұрын
Glad to hear that!
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!
@DipeshMalvia
2 жыл бұрын
Awesome! Thank you!
One of the most explanatory video on react redux. Thank you for providing such a good explanation. Eagerly waiting for redux-thunk video.
Great job dude. This helps me a lot to understand react redux. Thank you.
Awesome! in 50 min you have been so clear! Now I got better React ideas. Thank you so much!
@DipeshMalvia
3 жыл бұрын
Great to hear!
This video is an eye-opener for me thanks, buddy ......... waiting for more videos like this
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!
Oh its definitely Subbed my friend. Thanks for putting out great react-redux content. Marvelous!
@DipeshMalvia
2 жыл бұрын
Thanks for the sub!
Thanks ❤. Now I understand react redux proper from start to end. 🙏
This is an Awesome tutorial. I've learned a lot and it's very helpful. Thank you.
Fantastic tutorial! This helped me learn a lot about using Redux with React.
@DipeshMalvia
3 жыл бұрын
Great to hear!
Thank you sir, That is an amazing and clear tutorial, please upload more projects like this
Awesome clear explanation..!!! you are a great teacher, thankx for sharing..!!! 😎👍
You are awesome man !!!! You made things very easy to understand. Completely impressed with your tutorials!
@DipeshMalvia
2 жыл бұрын
Thanks for such appreciation. The channel needs such words to grow.
Really helped a lot. A big RESPECT! 🌹
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
Not one of the best, it is actually THE BEST REDUX VIDEO! Thank you for sharing your knowledge! Greetings from Serbia!
Thank you so much, this tutorial you made has really is awesome
@DipeshMalvia
3 жыл бұрын
Glad it was helpful!
I really appreciate the way you explain about React Redux. Such a clarity video that every one needed. Take a bow
This video and your way of explaining is very clear and simple. Thanks for amazing contents!
Great tutorial! I was having a bad time learning Redux. This has solved a lot of my doubts. Subscribed :)
@DipeshMalvia
3 жыл бұрын
Thanks for the sub! Glad it helped!
Thank you, this explanation is very clear, even a begginner can grasp a lot in one go.
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)
Wonderful tutorial. Can you make a video on dynamic html table, which means adding rows dynamic ally, updating and inserting the data.
Thanks a lot.. this was so helpful to understand redux easily...-)
Great and one-shot video. The channel code evolution make me to understand redux and your channel make me how to use redux.
Nice Article, learnt basics about Redux.. thank you once again
Great job. I really got mastery of the to and fro of how redux works. Thank you!
@DipeshMalvia
3 жыл бұрын
Glad it helped!
keep up the good work! your vids are helping a lot of student programmers!
@DipeshMalvia
3 жыл бұрын
Happy to hear that!
Nice video brother to understand redux from basic, keep it up👍
Very well explained about using redux in react app. Keep up the good work.. thanks.
brooooo! thank you so much for the tutorials!!!! got my first dev gig because of you!
@DipeshMalvia
3 жыл бұрын
Great to hear!
i watched this video for tomorrow interview,Appreciate your efforts. It helped me to refresh my redux concepts. Thanks 🤩
Thank you for this amazing video, I was struggling to learn redux. but now I can say I know redux after watching this video.
Hi its really worth watching content. Will appreciate if you tell the VS shortcuts you use for switch case ,Auto import etc..
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
@DipeshMalvia
3 жыл бұрын
Glad to hear that
Nice Tutorial Dipesh, Really loved it. Can you guide on how to implement pagination with API ? i have server side pagination already implemented. Thanks
Thank you so much. This is a great video for understanding redux even though every second of the video is knowledgeable.
This video is so straightforward. I love it!
@DipeshMalvia
2 жыл бұрын
Thanks!
Got grip of redux because of you, thank you so much!
Thankyou so much for this awesome video...my concepts got cleared
Best teaching mate just loved it you have a loyal subscriber
Great! Simple and very clear, thanks for sharing
@DipeshMalvia
2 жыл бұрын
Glad it was helpful!
Awesome.. Your teching way is pretty good
sir you have solved my problem, your tutorial is really helpful thank you so much!
Outstanding tutorial, my friend!!!! Thanks a lot for the refreshment
@DipeshMalvia
Жыл бұрын
Welcome Daniel!
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.
@DipeshMalvia
3 жыл бұрын
Glad you enjoyed it!
@mohammadhasandaneshvar
3 жыл бұрын
me too :))
@calvinlyle9437
2 жыл бұрын
i realize it is kinda off topic but do anyone know of a good website to stream new series online?
@alvaroporter4584
2 жыл бұрын
@Calvin Lyle ehh I use flixportal. You can find it if you google:P -alvaro
@calvinlyle9437
2 жыл бұрын
@Alvaro Porter thanks, I went there and it seems like a nice service :D I really appreciate it!!
Hi Dipesh...awesome video. as a beginner i loved it and it helped me a lot...can you please do the add to card and cart listing also?
very simply explained the redux api..Its really helpful to me.....thanks a ton
the finest tutorial on redux. Thank You
@DipeshMalvia
3 жыл бұрын
Wow, thanks!
Thanks a lot..highly informative 👍
Awesome Video, Thanks for sharing your expertise on it... Do you also have a kind of video for creating, updating, and removing the listings with redux?
Great Video !! I just have some notes from your video !! you dont have to do CombineReducers for the fact that your actions are very simple !! I did the same with only one Reducer to simplify things !! But people will follow along and will get along with Middlewares !! That's why you urged to write combineReducers !! Ohterwise Its a really great video and very useful to apprehend well the knowledge !!
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";
@joker-jc7ug
2 жыл бұрын
That's why my code was not running thanks for great help
Very useful vedio.Thanks
Thank you for this amazing video!
@DipeshMalvia
3 жыл бұрын
Glad you liked it!
Just amazing video and also helpful content.
Really appreciated, I have learned a lot. Could you please explain why the old item still shows after you clicked new product detail? thank you so much.
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
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.
@DipeshMalvia
3 жыл бұрын
It's my pleasure
Great explanation sir, you deserve more than thanks.
@DipeshMalvia
3 жыл бұрын
You are most welcome
thanks a lot, man you"re the best
amazing informations! thank you so much..
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.
@eliasimokhai
3 жыл бұрын
specifying the errors/bugs you encountered would help to give appropriate assistance
@jaydeepgoswami909
2 жыл бұрын
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.
thank you its helpful
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
Your way of of teaching is too good .... than the other youtubers .... thanks bro :)
Thanks a lot sir its very helpfull really
Bro, Thank you for nice video and explanation... I'm a new subscriber.
Thanks ❤️ very helpful
I have come across many videos but this video done the job for redux. Well done bro keep it up
@DipeshMalvia
2 жыл бұрын
Glad to hear that
Very useful video, many useful concepts Cover, thanks for sharing knowledge. Keep it up
Very nice tutorial, thank you.
Thank you!
Thanks for your clear explanation. :D
@DipeshMalvia
2 жыл бұрын
You're welcome!
This redux tutorial was really helpful please keep up the hardwork and thanks for the great explaination
@DipeshMalvia
2 жыл бұрын
Glad it helped!
best redux tutorial ever. new subscriber
excellent....! 21 topo (21 cannons) ki salami apko.
Really like others says i also gone through lot of react tutorials but your this one is really stands up super bro.
@DipeshMalvia
2 жыл бұрын
Awesome! Thank you!