One of the best tutorial about React's Reducer hook. Your book and videos are always one of the best resources to learn React.. Thank you so much Dave..
Wow I have been feeling the imposter syndrome for sometime now - finding this video tells me it is not me. You found a succinct way to explain this an I salute you thank you!
Very well explained! I'm taking a React course on Udemy with 700,000 students, and somehow the teacher managed to garble this topic really bad, when it can be this simple
It was awesome video I ever seen like this thank you so much I understood reducer hook concept. My special request is to make play list for all types of video.
Most logical explanation for useReducer hook. Have been through many youtubers but most if not all do the example of counter and make the hook not more useful than useState. Thanks Dave, aside from being 3 years ago the tuturial, do you have any new useReducer tuts?
Damn - amazing video. So clear, thank you. So from my understanding, useReducer is used when you have to manipulate state in a more complicated or complex manner than useState?
Isn't initial state supposed to be an object and not an array? I'm thrown as to why you used an empty array for state when traditionally it would be an object at 4:40. Can someone explain?
Nope, state can hold anything. It doesn’t have to be an object. It’s pretty common, for sure, but it can be anything - an array, a string, a Boolean, a number, whatever.
@@dceddia gotcha, thanks for taking the time to comment. Learning hooks and react better, and it's all been really confusing but aside from that one question you explained everything great. Thanks again!
ok, with this new hook api, how do you useReducer across, say, 2 different component, as everytime you useReducer, you create a new redux store. But if i have a component A and a component B, i want A to dispatch an action which change a state, then B sub to that state change and render the result, now you have A and B needs to be hook on the same redux store, how do you do it?
As you already noticed, useReducer is meant for keeping track of *local* state, not global state. Even though it works like a Redux reducer, it's not backed by a global store. It's more meant for managing complex state within a component. But you can make it work similar to Redux if you pass the state & dispatch around with the Context API (and the useContext hook).
With type=button, the button doesn't trigger the form submission but pressing Enter in the input does, and it refreshes the page. Give it a try: codesandbox.io/s/n51rvrrmlm
I know it's just an example but I want to point out that using big switches is of bad practice. It's breaking the single responsibility principle. Now the reducer has more than one reason to change.
Hi Dave, in case we want to fetch data from remote server and then pass it as initial state to a reducer, how we can proceed ? I tried to call dispatch inside useEffect but was rejected as per rule of calling hooks inside useEffect is forbidden
Hi great video, please if you can help me I need to increment and decrement an item from one onClick event fetching sensor data from an api get request
I dont understand what is new about this? Have they just inplemented redux into react. With that I mean, this looks like an dispatch action...? Whats the advantage of using it in a component? Or is that the awesome thing about useReducer?
Patrick Sjöberg it’s the same concept as a Redux reducer, but localized to one component. When your component state is more complex (like you have a bunch of useState calls to keep track of), useReducer is a nice way to combine those things, and the reducer logic can be pulled out into a separate function and reused.
"Should" implies using index is "wrong", but either way works as a way to find an element once. (unlike using 'index' as a component key, where it's not a good idea). Using the id would've been idempotent and probably slightly better from that perspective though.
Great stuff as usual Dave! I think you could avoid the `useRef` by use of the `event.target.elements` as demonstrated by KCD ruclips.net/video/kCR3JAR7CHE/видео.html
One of the best tutorial about React's Reducer hook. Your book and videos are always one of the best resources to learn React.. Thank you so much Dave..
Jebus on a Harley, fastest most concise and easiest to follow mini-tutorial laser focused on a single hook. Well done!
Wow I have been feeling the imposter syndrome for sometime now - finding this video tells me it is not me. You found a succinct way to explain this an I salute you thank you!
Wow Wow Wow, very clear. I have stuck with useReducer, but now understand well. Thank you.
Glad to hear!
This was a great explanation on the hook!
Very well explained! I'm taking a React course on Udemy with 700,000 students, and somehow the teacher managed to garble this topic really bad, when it can be this simple
A great example. Very well explained! Thanks Dave!
very good tutorial. I would certainly encourage you to make more such videos !. thanks
It was awesome video I ever seen like this thank you so much I understood reducer hook concept. My special request is to make play list for all types of video.
Most logical explanation for useReducer hook. Have been through many youtubers but most if not all do the example of counter and make the hook not more useful than useState. Thanks Dave, aside from being 3 years ago the tuturial, do you have any new useReducer tuts?
Thanks! Glad it was helpful. Haven't got anything newer though sorry! 😅
This hook alone made me reevaluate my preference of other is libs/frameworks. Awesome functionality
Wow! You made it damn simple. I am your new subscriber. Thank you very much.
Damn - amazing video. So clear, thank you. So from my understanding, useReducer is used when you have to manipulate state in a more complicated or complex manner than useState?
Great example, I would like see all Hooks API explained like this
Thanks, this is great! Can you also make one for useMemo?
In your opinion which is better in production Hooks or Redux? anyway Great video sir.
Isn't initial state supposed to be an object and not an array? I'm thrown as to why you used an empty array for state when traditionally it would be an object at 4:40. Can someone explain?
Nope, state can hold anything. It doesn’t have to be an object. It’s pretty common, for sure, but it can be anything - an array, a string, a Boolean, a number, whatever.
@@dceddia gotcha, thanks for taking the time to comment. Learning hooks and react better, and it's all been really confusing but aside from that one question you explained everything great. Thanks again!
Clear and concise. Thank you
Fantastic explanation! Do you need useContext for these variables to be used globally through out the application?
Yep, useReducer doesn't do anything to make the state available outside the one component you use it in. Context is good for that.
Very well explained & succinct, thanks
Nice video. Very clear.
Clean and crisp 😍
That's basically how the Redux works - but as a more simpler and less bulky hook.
The best of the best.
Great explanation, thanks 👍
I have Just FOund very Awesome Channel Thank you. do you have premium courses I am ready to buy
ok, with this new hook api, how do you useReducer across, say, 2 different component, as everytime you useReducer, you create a new redux store. But if i have a component A and a component B, i want A to dispatch an action which change a state, then B sub to that state change and render the result, now you have A and B needs to be hook on the same redux store, how do you do it?
As you already noticed, useReducer is meant for keeping track of *local* state, not global state. Even though it works like a Redux reducer, it's not backed by a global store. It's more meant for managing complex state within a component. But you can make it work similar to Redux if you pass the state & dispatch around with the Context API (and the useContext hook).
thank you very much .
if you use type button on button submit, you don't need to prevent default
With type=button, the button doesn't trigger the form submission but pressing Enter in the input does, and it refreshes the page. Give it a try: codesandbox.io/s/n51rvrrmlm
@@dceddia So don't put formSubmit on form) put it on the button
great teacher ! tks you very much
Ah.. Thanks for this!
I know it's just an example but I want to point out that using big switches is of bad practice. It's breaking the single responsibility principle. Now the reducer has more than one reason to change.
Switches are pretty common in reducers, at least these Redux-style state reducers, from most code I've seen. How do you write them?
Thank you!
Sir thanks
Hi Dave, in case we want to fetch data from remote server and then pass it as initial state to a reducer, how we can proceed ? I tried to call dispatch inside useEffect but was rejected as per rule of calling hooks inside useEffect is forbidden
Fetch your data in use effect and pass it to your state. Use effect replaces other lifecycle methods
Wow ❣️
Neat, thanks for sharing!
Hi great video, please if you can help me I need to increment and decrement an item from one onClick event fetching sensor data from an api get request
Hi Dave,
Can you please make a video about Redux-ORM?)
I dont understand what is new about this?
Have they just inplemented redux into react.
With that I mean, this looks like an dispatch action...?
Whats the advantage of using it in a component? Or is that the awesome thing about useReducer?
Patrick Sjöberg it’s the same concept as a Redux reducer, but localized to one component. When your component state is more complex (like you have a bunch of useState calls to keep track of), useReducer is a nice way to combine those things, and the reducer logic can be pulled out into a separate function and reused.
@@dceddia ahh i understand now. Thanks!
Very good
Remove item should use id instead index.
"Should" implies using index is "wrong", but either way works as a way to find an element once. (unlike using 'index' as a component key, where it's not a good idea). Using the id would've been idempotent and probably slightly better from that perspective though.
Hey I have the dumbest question ever: what theme are you using?
Dor Bens that’s Sarah Drasner’s Night Owl. Love that theme!
Great stuff as usual Dave!
I think you could avoid the `useRef` by use of the `event.target.elements` as demonstrated by KCD ruclips.net/video/kCR3JAR7CHE/видео.html
Did I find God 😇