After using redux for some time, I switched to MobX for few years, now I needed some thing to refresh my memory of using redux with hooks. And this tutorial was perfect in every way. Thanks a lot.
So well explained! This was everything I needed to know to understand redux! And it isn't so bad anymore! Please continue making tutorials, we need more people like you ❤️
One of the best explanations of redux I have seen but the best one in case of redux with hooks. In the last redux with hooks tutorial there were no dispatch binding so I had to dispatch every action returned from AC manually like: "dispatch(deposit(100))". Really confusing and not intuitive (in short, it looks bad). Without this AC looks way simpler, just functions we made to update state. For such a detailed explanation of redux and every part of it I give you a sub.
This is a great video. I've already used Redux in a bunch of applications, so I just came for Redux with hooks, but I was very impressed at how concise Laith's explanation of Redux itself was. Great stuff.
omg I happened to just stumble on this video whiles searching for a concise video to explain redux to me. This is the best by far! you're tooo good. and I appreciate you. God bless you
Thank you so much. The bank analogy was really very helpful. It's the best redux tutorial on youtube until now, I tried all but only you did make me understand.
Laith is the best teacher I had seen. I was in his react 18 bootcamp from udemy and there was a netflix app that we learn to develope that used redux , and even though he explains every thing well I need to jump and see a few videos . I did not know his channel and when I accidentally open this video when I heard his voice I jumped and I see this video , I really am happy to see his channel cause he is the best in terms of explaining things.
Following your code for the action-creator I will get an error "Actions must be plain objects. Instead, the actual type was: 'function'. ". I thought I declared dispatch repeatedly but I did not find that problem. So I google around I had to change the syntax for the action-creators to: export const depositMoney = (amount) => { return { type: "deposit", payload: amount } } export const withdrawMoney = (amount) => { return{ type: "withdraw", payload: amount } }
you can use implicit return to make it more simple: export const depositMoney = (amount) => ({ type: "deposit", payload: amount }) even more simple: export const depositMoney = (payload) => ({ type: "deposit", payload })
I don’t know why he’s introducing a more complex form of an action creator as opposed to starting with a simpler example and extending on it . What he’s showing here is called Redux Thunk .
Explaining the workflow is actually better than remembering the code, which you can find it almost anywhere, thank you so much for doing this, it was in fact the best tutorial/crash course i've seen about redux, please keep doing it like that.
I bumped into this error on number 42:06 Fix - actions must be plain objects. use custom middleware for async actions. I solved it by installing thunk npm i --save redux-thunk Then I imported thunk in the store file: import thunk from "redux-thunk" Then I setup the middleware in the createStore method: createStore(reducers, applyMiddleware(thunk))
Great high level walk through of getting up and running. I haven't used Redux in a production environment yet and wanted a refresher on it. After watching this I just don't want to use Redux. Being able to build out this same logic/functionality with Context/Hooks in less time and with less code makes me think "Why would anyone use Redux!?"
I've searched so many tutorials about redux and also bought a udemy course to learn redux but I still had difficulties understanding it. The way you explained everything in this video made everything "click" for me. Thanks so much for making this! 😄
thank you 3000 for everything, I have tried many tutorials but didn't work till seeing and coding along your vids and finally I understand typescript, redux. TY!
@@worldclasscode1847 actually I did recently, and it brought me to believe that quite a lot of usecases (especially auth) that I used to solve with redux can easily be solved with context 😂😂
Thanks. i really mean this as a compliment. It's nice to have something that covers theory a bit, and bridges it to some of the lingo. Most of the react and redux api is all over the place even the official documentation; it's extremely hard to follow. there are 10 different ways doing doing things. It's like the people that right the react documentation are the same folks working on the facebook privacy controls. This really helped.
Watched it as a refresher, decent crash course. One comment on writing actions - what made Redux think you're intending to send async actions (and there are needing to apply a middleware in your store, which you don't need to do otherwise) is that you returned a function instead of a plain object in your action creator. You'd only be returning a function there if you're using thunk (and I'm guessing other async redux libraries also use this pattern) in the first place.
Great tutorial man, I learned a lot but I wish you brought up the thunk earlier because I kept rewinding your tutorial over and over again because I thought I missed something.
Thank you so much for making this! Made my life so much easier today! I was a little rusty coming back to Redux using hooks rather than class components and was looking for a refresher and I have to say that this is one of the best simple explanations showing all of the moving parts I've seen. Thank you so much for your hard work. Also - for anyone who went over that third to last section three times - just wait till the end, the thunk error is explained. :)
The bank analogy was fantastic except for reducer takes in action, but the point is when there is any dispatch happened in the application, the store will LISTEN to the action type and route that ACTION to a specific REDUCER function, in a nutshell, the banker guy is STORE and reads the envelope and pass it to the respective worker (reducer function ) based on the text in an envelope (action type)
very good for a beginner trying to learn redux, I would suggest at 35:05 when you said dispatches an action, dispatch being hard to grasp for beginners i would suggest use "action creators return an action object"
The best video of explaining about the redux with react. The example of this tutorial is amazing, i am so appreciate of your work. it inspiring ✨, Big thanks to you.
This is very well explained bro! You are the first video that I can concentrate on. The tone of your voice, the straight to the point style and the clear picture of stuff are just excellent!
I just paused the video just for saying to you thank you about your schema explaining Redux process, I like the idea around the king, servant, pigeon ( Take a dove next time because I hate pigeons ) and the Bank !
I didn't find a good react-redux course in my language (Persian). And I was disappointed and confused until I found this course. Thank you very much for this amazing course. I learned everything very quickly!😍😍💐
While researching I was put off by Redux, because people pictured it as being overly (and unnecessarily) complex. I think I get what they mean, but your video structured Redux' workings so clearly that I'm actually excited to dig deeper. Thank you so much for this! Now back to doing the UIs bidding 😅
that was really easy to understand. thanks. Although I was searching if I made a mistake when I got an error and you smoothly clicked on the buttons and had to watch it twice.
createStore is deprecated in favore of configureStore. I got it to work with the following: ``` const store = configureStore( reducers, [] ); ``` Thunk is automatically added as middleware btw (for anyone wanting async w/ redux)
Hi! A humble request pleease :) do a React-Redux Toolkit and also how to integrate the Redux DevTools Extension, thank you and so much love for the free knowledge and content you make
Thank you so much for this! I've tried my hardest to learn from the documentation but it is just so hard to grasp. You explanations and step by step process made everything much easier.
Wow, this Redux crash course is an absolute game-changer! 🚀 The clarity of explanation, practical examples , and step-by-step guidance make it the best Redux crash course I've ever come across. Thanks to this course, I now feel confident and empowered to harness the full potential of Redux in my projects. Highly recommended!" 👏👍
It’s quite refreshing and beginner friendly for your crash course. I find it a little bit complicated at first, but practice and patience definitely helps me understand React state management along the way.
Very well explained mate. Have been through a lot of react-redux videos but they are too complex. I love your example and step-by-step approach. I am your big fan from now on 🙂
Lol, spent like 20min trying to understand the "Action must be plain object error". Solved it by removing the (dispatch)=>{..} wrapper function and then continued to watch the video where he went on to display that we probably are seeing an error and that is because of the redux-thunk :D So just to clarify, in this case there is actually a zero need for the redux-thunk, right?
Best f****** React Redux tutorial ever on UA-cam. U are the best man. Appreciate it!
after 7 hours of watching nonesense about redux, I found this video THAT ACTUALLY MADE ME UNDERSTAND!! thank you, you are a hero
No one has ever explained redux this simpler than you did!!! Glad I found you👏
Finally after 3 years of wanting to learn redux, i finally found a very good explanatory video. God bless you. ❤❤. You deserve more than a sub.
How about Context ? ua-cam.com/video/Uex_Z8CLHsc/v-deo.html
After using redux for some time, I switched to MobX for few years, now I needed some thing to refresh my memory of using redux with hooks. And this tutorial was perfect in every way. Thanks a lot.
I'm actually glad he ran into that error at the end of the tutorial, it helps explain what Thunk does and how to apply middleware.
So well explained! This was everything I needed to know to understand redux! And it isn't so bad anymore! Please continue making tutorials, we need more people like you ❤️
I was in his react 18 bootcamp , he is the best teacher I had seen.
One of the best explanations of redux I have seen but the best one in case of redux with hooks. In the last redux with hooks tutorial there were no dispatch binding so I had to dispatch every action returned from AC manually like: "dispatch(deposit(100))". Really confusing and not intuitive (in short, it looks bad). Without this AC looks way simpler, just functions we made to update state. For such a detailed explanation of redux and every part of it I give you a sub.
This is a great video. I've already used Redux in a bunch of applications, so I just came for Redux with hooks, but I was very impressed at how concise Laith's explanation of Redux itself was. Great stuff.
omg I happened to just stumble on this video whiles searching for a concise video to explain redux to me.
This is the best by far! you're tooo good. and I appreciate you. God bless you
Thank you so much. The bank analogy was really very helpful. It's the best redux tutorial on youtube until now, I tried all but only you did make me understand.
Laith is the best teacher I had seen. I was in his react 18 bootcamp from udemy and there was a netflix app that we learn to develope that used redux , and even though he explains every thing well I need to jump and see a few videos . I did not know his channel and when I accidentally open this video when I heard his voice I jumped and I see this video , I really am happy to see his channel cause he is the best in terms of explaining things.
Following your code for the action-creator I will get an error "Actions must be plain objects. Instead, the actual type was: 'function'. ". I thought I declared dispatch repeatedly but I did not find that problem. So I google around I had to change the syntax for the action-creators to:
export const depositMoney = (amount) => {
return {
type: "deposit",
payload: amount
}
}
export const withdrawMoney = (amount) => {
return{
type: "withdraw",
payload: amount
}
}
thanks
Yes, he gets to this later, but only after running different code than the code so far in the lesson, and making you think it's your mistake. 🙃
Great thanks! A lot simpler syntax to understand/remember.
you can use implicit return to make it more simple:
export const depositMoney = (amount) => ({
type: "deposit",
payload: amount
})
even more simple:
export const depositMoney = (payload) => ({ type: "deposit", payload })
I don’t know why he’s introducing a more complex form of an action creator as opposed to starting with a simpler example and extending on it . What he’s showing here is called Redux Thunk .
Explaining the workflow is actually better than remembering the code, which you can find it almost anywhere, thank you so much for doing this, it was in fact the best tutorial/crash course i've seen about redux, please keep doing it like that.
I bumped into this error on number 42:06 Fix - actions must be plain objects. use custom middleware for async actions.
I solved it by installing thunk
npm i --save redux-thunk
Then I imported thunk in the store file: import thunk from "redux-thunk"
Then I setup the middleware in the createStore method: createStore(reducers, applyMiddleware(thunk))
Thanks! He does explain this in the video though - also, I don't believe you need to use the --save flag on npm installs anymore as of v5.0. 👍🏼
@@klhmia Thanks Karseen. I later on saw that he solved it later on in the video.
You've enlightened me on the --save flag.
After watching 20 videos , this is the one video which explained me what is redux clearly,
thanks man🙂
Nice demonstration man. Worth every second
Great high level walk through of getting up and running.
I haven't used Redux in a production environment yet and wanted a refresher on it.
After watching this I just don't want to use Redux.
Being able to build out this same logic/functionality with Context/Hooks in less time and with less code makes me think "Why would anyone use Redux!?"
I've searched so many tutorials about redux and also bought a udemy course to learn redux but I still had difficulties understanding it. The way you explained everything in this video made everything "click" for me. Thanks so much for making this! 😄
This is genius way of explaining it. I have never got the full scope of redux until today. Thanks!
thank you 3000 for everything, I have tried many tutorials but didn't work till seeing and coding along your vids and finally I understand typescript, redux. TY!
Bro, this is the best Redux explanation on YT and I’ve seen many! Thanks! Keep on posting your videos please!
I was always afraid of using Redux but your video literally hyped me up to use it in my next project. Damn, thats how teaching should always work
Did you try Context in any project? :)
@@worldclasscode1847 actually I did recently, and it brought me to believe that quite a lot of usecases (especially auth) that I used to solve with redux can easily be solved with context 😂😂
I was searching for the best redux and toutorial but this is even better than i expected Thankyou so much for putting real effort in it..............
Redux data flow analogy is just amazing. You nailed it
The truly remarkable videos do not ask for Likes or Subs - I'm totally blown away by this great video
Thanks a lot from France for this crash course, wanted to learned Redux with React hooks, now it's done!
This is the best introductory react-redux course I have seen
The illustration really helped. The explanation is clear and concise. A kingly video.
Thanks. i really mean this as a compliment. It's nice to have something that covers theory a bit, and bridges it to some of the lingo. Most of the react and redux api is all over the place even the official documentation; it's extremely hard to follow. there are 10 different ways doing doing things. It's like the people that right the react documentation are the same folks working on the facebook privacy controls. This really helped.
This is hands down the best react redux crash course ever
Watched it as a refresher, decent crash course. One comment on writing actions - what made Redux think you're intending to send async actions (and there are needing to apply a middleware in your store, which you don't need to do otherwise) is that you returned a function instead of a plain object in your action creator. You'd only be returning a function there if you're using thunk (and I'm guessing other async redux libraries also use this pattern) in the first place.
Great tutorial man, I learned a lot but I wish you brought up the thunk earlier because I kept rewinding your tutorial over and over again because I thought I missed something.
lol same here man
he hasnt shown that part but it works any way
Yes.
Thank you so much for making this! Made my life so much easier today! I was a little rusty coming back to Redux using hooks rather than class components and was looking for a refresher and I have to say that this is one of the best simple explanations showing all of the moving parts I've seen. Thank you so much for your hard work.
Also - for anyone who went over that third to last section three times - just wait till the end, the thunk error is explained. :)
Very concise explanation of the core architecture, state relationships, of redux as it pertains to react.
literally after watching numbers of redux tutorial, this is the best.The best part was the analogy of bank example. Thankyou.
Great tutorial! Was trying to get back into React and Redux after having been out for a while, and this was really helpful. Thanks!
Finally found the course that teaches redux conceptual and easy to learn.Thank you
Some times following crash courses are best before this I only watched 3 hour of course on Pluralsight but no understanding
Many thanks to you
Bro, this one video led me to completely understanding Redux. You are amazing
Wow. This is the best crash course about React-Redux. Thank you very much !
this is the most amazing redux video on the internet. thank you so much sir, please keep making react video
This is a great explanation of Redux. I've watched some Udemy course from the other guy and this was explained much better. Appreciate!
Thank you very much. I've always been scared of redux and I've taken many tutorials and I think I finally got it. Thanks
Best explantion of redux I've ever seen. THanks
Great video, gave me a lot to explore redux. Seems like there is still alot to explore, ill be coming back for sure!
The bank analogy was fantastic except for reducer takes in action, but the point is when there is any dispatch happened in the application, the store will LISTEN to the action type and route that ACTION to a specific REDUCER function, in a nutshell, the banker guy is STORE and reads the envelope and pass it to the respective worker (reducer function ) based on the text in an envelope (action type)
very good for a beginner trying to learn redux, I would suggest at 35:05 when you said dispatches an action, dispatch being hard to grasp for beginners i would suggest use "action creators return an action object"
The best video of explaining about the redux with react. The example of this tutorial is amazing, i am so appreciate of your work. it inspiring ✨, Big thanks to you.
This channel is a goldmine. Keep up the good work!
Best Redux explanation on the whole youtube 👍
This is very well explained bro! You are the first video that I can concentrate on. The tone of your voice, the straight to the point style and the clear picture of stuff are just excellent!
I just paused the video just for saying to you thank you about your schema explaining Redux process, I like the idea around the king, servant, pigeon ( Take a dove next time because I hate pigeons ) and the Bank !
Thank you the nice video, this really gives me an image of how redux works
The best Redux tuto I really appreciate your efforts , keep going bro
I didn't find a good react-redux course in my language (Persian). And I was disappointed and confused until I found this course. Thank you very much for this amazing course. I learned everything very quickly!😍😍💐
Best crash course on react-redux! Thank you!
React-redux now makes more sense to me, thanks so very much for the clear explanation!
Your real life bank example is just awesome. Many thanks, man.
While researching I was put off by Redux, because people pictured it as being overly (and unnecessarily) complex. I think I get what they mean, but your video structured Redux' workings so clearly that I'm actually excited to dig deeper. Thank you so much for this! Now back to doing the UIs bidding 😅
that was really easy to understand. thanks. Although I was searching if I made a mistake when I got an error and you smoothly clicked on the buttons and had to watch it twice.
This is the best react-redux tutorial video
createStore is deprecated in favore of configureStore.
I got it to work with the following:
```
const store = configureStore(
reducers,
[]
);
```
Thunk is automatically added as middleware btw (for anyone wanting async w/ redux)
Thanks for this
Hi! A humble request pleease :) do a React-Redux Toolkit and also how to integrate the Redux DevTools Extension, thank you and so much love for the free knowledge and content you make
Thank you so much for this! I've tried my hardest to learn from the documentation but it is just so hard to grasp. You explanations and step by step process made everything much easier.
I just found your channel and I found crash courses I needed. Thank you for clean explanation. Great content. I hope I would have found you sooner.
damn ! one of the best explanations on react redux i have found so far !
Wow, this Redux crash course is an absolute game-changer! 🚀
The clarity of explanation, practical examples
, and step-by-step guidance make it the best Redux crash course I've ever come across. Thanks to this course, I now feel confident and empowered to harness the full potential of Redux in my projects. Highly recommended!" 👏👍
Best video so far on React-redux
At last I have understood Redux. Thank you very much for your great explanation. Subscribed😊
Too great bro .. Best tut with best explanation on redux.
❤️❤️
Best video on Redux - really well explained, thank you!
man how cool u explain it thank u very much it was the most atractive tutorial have ever seen
It’s quite refreshing and beginner friendly for your crash course. I find it a little bit complicated at first, but practice and patience definitely helps me understand React state management along the way.
amazing tutorial!! i watched with all my being, although I've known redux
Best Redux explanation I have ever seen so far. Great job, thank you for your effort.
Bravo. Truly well done. One of the best instructional videos I have seen, ever.
The best redux tutorial i could find! Thank you for this. You're amazing!
Very well explained mate. Have been through a lot of react-redux videos but they are too complex. I love your example and step-by-step approach. I am your big fan from now on 🙂
This video really helped me alotin understanding redux, now it is certainly not so scary, lol!
Really, very good explanation. Thank you very much. Eventually, I understand Redux.
The way of explanation is too good keep rock bro 👍
this is something on another level, mate
Yo this was such a good explanation. Much better than what I've been trying to follow on a udemy course i bought.
Best Ever Crash Course On Redux
Perfect video to learn redux, a simplest way to understand the whole concept of react-redux.
Once again watching to refresh my knowledge.
Liked and subscribed. Thank you for providing us with such a clear and concise explanation, for free at that.
This is the best video on Redux 💥
I finally understood some concepts thanks to you. !
This was explained very well! Really helped, thank you.
thanks a lot man, you are really helping me to develop my skills :)
Love the story telling part!
Review:- This is the only video that perfectly explained Redux
Excellent video, cleared most of my doubts
It's really well explained tutorial. And the way of teaching is impressive
Lol, spent like 20min trying to understand the "Action must be plain object error".
Solved it by removing the (dispatch)=>{..} wrapper function and then continued to watch the video where
he went on to display that we probably are seeing an error and that is because of the redux-thunk :D
So just to clarify, in this case there is actually a zero need for the redux-thunk, right?
You explain it with really good story example,great lesson.
You just earned a new subscriber. Thank you for this in-depth and well-explained tutorial
Thanks so much, Laith. You are an awesome coder and teacher.