Learn how to use Redux in this full course for beginners. You will learn how to use Redux with ReduxToolkit Library to create an application involving HTTP requests.
✏️ Nikhil Thadani created this course. Check out his YouTube channel:
💻 Code:
⭐️ Course Contens ⭐️
⌨️ (0:00:00) Introduction and Overview of Tutorial
⌨️ (0:00:58) Basic Terminologies
⌨️ (0:02:20) Counter App With react-redux
⌨️ (0:16:11) Using Redux Toolkit
⌨️ (0:24:34) Shopping Cart Project – Introduction
⌨️ (0:25:53) Shopping Cart Project – Auth Slice State
⌨️ (0:37:49) Shopping Cart Project – Cart Slice State
⌨️ (0:57:11) Incrementing and Decrementing Items From Cart
⌨️ (1:06:00) Adding Logout State
⌨️ (1:08:03) Using Firebase with Redux
⌨️ (1:11:11) Sending asynchronous HTTP Requests with Redux
⌨️ (1:17:05) Adding Notifications with Material UI
⌨️ (1:19:02) Adding Notification slice state
⌨️ (1:27:24) Using Redux Thunk Pattern
⌨️ (1:28:37) Creating Thunk Pattern with redux
⌨️ (1:32:22) Sending GET HTTP request with Redux
⌨️ (1:40:51) Summary of the course
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
45 Comments
Indian Coders
3 years agoThank you, Beau, for sharing this course on the most loved channel of developers. Would love to contribute to this awesome community in future as well ❤️.
Listen
3 years agointerviewer: you will have react Redux technical exam tomorrow
me: opens YouTube
KuKo Visuals
3 years agoam I tripping or I'm blind, where is the data coming from <Auth/> component ? can someone point out the minute for it. the git repo doesn't have any files,
Willy Horizont
3 years agothanks bahut badhiya
reomo romiu
3 years agoThat's Great! Thank you so much.
kurt Ivey
3 years agohad to lower the playback speed to .75 because the guy speaks so fast
Current Toff
3 years ago1:37:27
replaceData(state, action) {
state.totalQuantity = action.payload.totalPrice;
state.itemsList = action.payload.itemsList;
},
can anyone explain why he has written state.totalQuantity = action.payload.totalPrice;
Olusola Afikode
3 years agoThanks for this great tutorial. I am only about to start learning redux but it says createStore is deprecated. How do I pass through this hassle. I have tried using import {legacy_createStore as createStore) from "redux" but the import method is not working.
show more show lessAnyone with solution can help. Thanks in advance.
NBA6Fan
3 years agoThis video is only 2 months old, but it is already deprecated. He is also jumping from file to file in this tutorial and doesn't do well at explaining what he is doing. I appreciate free tutorial, but I would say FCC usually brings higher quality content.
Swagat Vlogs
3 years agoPlease give proper pause and speak slow in your next videos. You sound nervous and the users have to pause or scramble more through the video to understand what you are trying to convey. Overall, this video was informative and detailed. Thank you.
Ajkl Ajkl
3 years ago4:08 whats PPT dude i have trouble withthe understanding and u said WE already discussed there, where???
009freestyler
3 years agoHow do use Redux to show data on page load ? I have an action in my slice to fetch all data from a REST API, then I dispatch that action from useEffect but it doesnt work 🙁 😢😭😞
nat
3 years agoI’ll have to come back to this. I just hope it’s not using typescript
Joey Vico
3 years agocreateStore is deprecated 🙁
Huzaifa Iqbal
3 years agoyou've to be more specific about what every functions are doing and why we are doing export, counteSlice.actions etc
George Beard
3 years agoThe video is good, but many cuts and edits mean you miss things out like insertion of brackets etc, make the video confusing at times, also talking too fast.
Snigdho Dip Howlader
3 years agoSeems like he did not share the code like it was mentioned in the description.
Huzaifa Iqbal
3 years agothere is a BUG in this code that if you remove all the items from the cart then reload the page then layout page would not appear anymore
fix that BUG before giving assignment as you said in the end
Zakia RAHMOUNE
3 years agoVery Helpuful, Thank you very much Sir!
Celine Clement
3 years agohello , it's a problem as foreatch
Demian N
2 years agoI think the code is missing in the repo
Prashandip Lunghimba
2 years agoThank you so much … It is very helpful … You are awesome …
Un Jin Jang
2 years agoAmazing guide! I have a small question regarding your redux normalization, shouldn't it be more complex when it comes to creating a normalization for redux? Or did you design the normalization for this project simple since it's just a beginner tutorial?
Behnam Parsaei Fard
2 years agoGreat instruction! Just a little question: when did you add dispatch to useEffect dependencies and why you added that? Is it necessary? What does it do?
eniola adejori
2 years agoCan you make a tutorial redux with next.js
jijinho
2 years agoman you need to work on your english honestly..
kushagra
2 years ago1:32:58
Rao Asim
2 years agoInstead of a loop for total price calculation, just add a new prop totalCost in cart-slice and the following line at the end of addToCart method:
state.totalCost +=newItem.price;
Do the same for decrement, add the following lines at the end of removeFromCart method:
existItem.totalPrice-=items.price
state.totalCost -=items.price;
and instead of just passing the id, also pass the price of item which will be deferred as items.price and id would be referred as items.id. Your first line of this method would look like:
const items =action.payload
show more show lessAhmad Hassan
2 years agogithub code link not available
Warren Beyda
2 years agoI don't think the HOW without the WHY approach to teaching is very good.
Adrian-Mihai ROSU
2 years agoA truly amazing tutorial. Fast-paced, well explained, and backed by practice.
Arbab Khan
2 years agoNot professional…
Next-step Learning Academy
2 years agoAwesome explaination
Holy Git
2 years agoAm I only one who thinks it can be achieved more simpler way? Sorry, but your code is messy.
sus man to be alive bruh
2 years agoHad to lower the speed lol to 0.75 cause the dude is wayyyy to fast!
John Paul Pineda
2 years agocan somebody explain to me this gist
if (existingItem.quantity === 1) {
state.itemsList = state.itemsList.filter((item) => item.id !== id);
} else {
existingItem.quantity–;
existingItem.totalPrice -= existingItem.price;
}
why the condition is 1?
Ragnar
2 years agoGreat Tutorial, I will now work on my project
Faraz Nisar
2 years agoPlease stop saying "SO NOW" 10 times in a single sentence. No offense and no disrespect, you just say it a lot.
Gergin Ivanov
2 years agoThis guy is rushing through the material like a maniac; beginner tutorial my ass
chief master
2 years agoPlease a little bit slower I had to pause multiple times in 10 secounds 😀
In case you missed it
2 years agocodewithmosh still the best
Vedat Sözen
2 years agostore is not defined error in index.js why ?
Avinash Gupta
2 years agoIndian coders @ FCC ❤️
Michael Nongphud
2 years agothank you sir
Rishi Thakur
2 years agoThank you for the entire video, we can use reduce at https://youtu.be/zrs7u6bdbUw?t=3912
also.