React Hooks Tutorial - 22 - useReducer with useContext
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
useReducer with useContext in React
Hey dude, I just wanted to say how much you have helped me throughout my studies of react hooks. It's awesome that someone is producing high quality educational content. Thank you very much!
11:44
You can destructuring object
for example
const {countState, countDispatch} = useContext(CountContext)
then directly use 'countDispatch' instead of using : countContext.countDispatch!
it's more cleaner.
thank u bro
Thank you :)
const [ count, dispatch ] = useContext(CountContext); :)
@@imharishsambasivam I dont think it useContext returns an array, you have to destructure using obj only
Congratulations on your playlist. Expanded my knowledge in hooks. I would like to see more examples of useReducer and useContext in a more complex way. Of course if possible. thanks.
Same here.
The way you explain and the methodology, everything is sooo good. Amazing!
dude, you are the best. Ive struggled to understand some of these concepts for a long time and you've helped me inmensely with this playlist. Thank you so much
bro thank you for helping me understand useReducer. you are a 100% teacher. I wish I could learn from you in person. No matter what I will never give up, and learn this field. I hope I meet you one dat. Thank You brother
Thank you so much ...I just started my career in web devlopment and i have trouble in understanding react hooks ... Your series helps me a lot .. Thank you so much for your knowledge
No other course or channel helped me on understanding some React concepts like your channel did. Thank you, brother!
Codevolution, you are a great teacher. I've understood the Hooks concept perfectly. My only problem with React is that little projects take up lots of coding. I appreciate your channel. Kindly do a tutorial on how to connect React with a Backend. Thanks once again.
for small projects better to just avoid frameworks altogether in my experience
I am watching ur vids since 2019. And I feel u r wayyy much better than those online paid courses. Thanks a lot. And I wish u continue contributing like this forever. Will surely contribute towards you. Hats off
Vishwas sir you don't know how much you are helping developer to understand react. This hooks playlist is just amazing amazing amazing amazing and is the best react hooks playlist I have ever seen. Thank you so much❤
This is the way to teach a very complex topic ... I've seen others, this is by far the BEST!! THANK YOU VERY MUCH ... Plz keep ém coming ...
i think you might be the best i have seen who explains things well and in detail
The first tutorial about making state global using hooks which so so easy to understand, even I don't need to watch it again, so thanks a lot.. You're amazing and please keep making videos on hooks with same way..
Thanks a lot! I haven't gone through redux, but this looks cleaner and nicer!
Instead of wrapping the whole App component, it would have been better if u would have wrapped only required components 😁
Thanks to the crystal clear explanation😊😊😊🙏❤️❤️❤️
Thank you so much…simple examples to clearly get the steps and easily get the picture. Thank you so so much.
1:28 components might need to share the same counter, the straightforward solution is to declare the counter at highest level and pass it down through props to components but if nested then this will be prop drilling
Using context hook with reducers allows nested components to use state without drilling
Straight, Simple & To-the-point !!! Thanks for the awesome tutorial :)
thank you very much bro i was struggling with your topic so much but after i saw your video everything got cleared
Pretty much clear about the shopping cart concept... thanks a lot team "Codevolution"
This is a very god tier tutorial and explanation. Good work dude, you have good pedagogical skills!
Awesome video!! Very clean and superb explanation! I'm really glad to watch your React.js videos! Thanks.
Hey! I reached so far and wanted to say thank you for your time and explaining! Helps a lot!
This is different level of teaching . Thank you a lot ...
Man even Thanks you feels very tiny for ur work Hatsoff man Seriosuly Ur helping my work and life easy 💓
Note: useReducer + useContext = Redux
and x100 times cleaner
are you sure??
useReducer + useContext = small redux.-----------|
|---->Flux is the father
useSelector + useDispatch = Redux. -----------|
XDD
Regards
@@oussamakhalfi1751 Redux cleaner or useReducer + useContext?
Which is better?
Pro level explanation! Can't get better than this!!!
You deserve million views, I learned a lot from these videos
Wow your videos are great to watch . The way you are explaining concepts is really fantastic . Nice knowledge transition .
Understood completyly thank you vishwas sirrr
Amazing! Really good explanation.
Awesome bro! You explained this concept really well. Thanks a lot Vishwas
I got my answer in the first lines you said. Thanks
Hats off sir Allah bless you.
This is the best so far.
Excellent series! Easy to follow.
Too good and too simple 😊
Next level explanation.
Soooooo simple! Thanks for this!
simple & efective, thanks
You deserve a million views and stars
am better than ever
10/10 explanation
This replaces the entire redux concept !!! in such a simple way..
you helped me as well. thank you .
man you are good at teaching ! , subscribed
Thanks for this tutorial. I want to pass generated token for each component and it will be save to sessionstorage.
Damn!! This video is so helpful. Thanks man..
Thanks for those videos.
Excellent tutorial, thank you!
Love the way you explain :)
This concept works even if we implement it by using useState and useContext Hooks.. Can I know what Is the exact difference between using useState and useReducer in this concept
thnks for the explanations :) very simple and helps me a lot
Thank you Brother🙏
Great tutor with great knowledge
I was searching the material on internet regarding the data communication child to parent, I got so many but did't get concept from there.
Now I got it from here. But still some query is there if we are writing context. Provider without defining in parent how we will wrap and send data from child to parent.
Thanks you very much Sir... 👍
This is Magic bro
Awesome video !
You guys need to pay attention to the re-render of the children component if we do this way :)
For some reasons I’m getting an “Error: Element type is invalid: expected a string (for built- in components) or as a class/function (for composite components) but got: object . You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
you deserve million views
Thank you Codevolution for explaining React.js in an amazing way, and sharing them online
could you also make videos on Reactstrap too...
Hi I implemented the same code, but I am getting a error that I cannot read countState even though it is in a higher level?
What Did I learn from this EP22
to access global variables or values which is passes using useContext hook in it's child components
useReducer + useContext
this is how we cat get rid of redux and use all the stuff from react :)
Yes I understand some react stuff but to me Redux is like Korean mixed with Thai impossible to understand! :)
@@zealousprogrammer4539 hahaha, EPIC HAHAHA, but actually its not that complex.
@@BharatSingh-zk8lx bro, I have properly understood useReducer and useContext, do I have to learn redux still?
@@Virus-ke8xj yes coz context is not suitable for large scale apps. Redux is much preferred in that case. U should do some research redux over context 👍
Thank you again ... an waiting for the next video :)
mazza aa gaya
Viswah you are GR8 Teacher , do you have these courses in UDEMY or any where ?
Very useful
brilliant ur great.
Thanks My teacher
not sure if it is me only or others also wonder about few features like useState, useReducer & useContext. Means if we need to share the state & behavior with other components then why cant I create a class object having the state & behavior & import it where-ever required like doing with use*() features.
a lot of thanks
its the same concept of Redux, only the different is that you can create many useContext as you want, in redux only one global and you create the reducers as you want.
The main question. Is it accept async calls?
Hello there I am using vite and every time I save the App.js it result in blank page and throw an error says: Uncaught TypeError: Cannot read properties of undefined (reading 'countState')
thank you so so much.
Great videos. I giggle when you pronounce the name "Provider". You make it sound like "Prowaida"... or maybe it's my ears. :)
Is it really good practice to have your reducers in app.js?
question for anyone who knows the answer- why is he wrapping app.js's return in a provider rather than defining a value in the createContext declaration and then using useContext?
i have 3 components but only one state...now i need to change the value of the state. for each component it should maintain separate value. how can we implement it??
create seperate local states
Is it also possible to use useState with useContext to manage global state? And if not, why? Thank you for your reply :)
Yes, Possible wastch Piyush Garg Context Api video , You will understand that completely
Great video.
Can this technique scale for medium/large scale applications?
I have been using redux for some time and this method seems like a less painful way of doing so but I feel like there is a catch I might be missing. your thoughts?
Very well
Great tutorial !!!
Awesome
No errors but every time i click on count it just count +1 and reset its state to initial state ..
best like always
you are awesome :)
What if one of the Childres inside a Provider is a Class?
Is there any possibility to transfer values then? because i know, that Hooks are NOT possible in Classes ...
What if I wanted to make some changes to component A if some event occurs in component B? I tried to use the traditional way of doing that as you showed in the video but component A doesn't update if an event occurs in components B. only component A re-renders in this case. so I have to pass the global state and dispatch function from the app to all the component. If you know a solution where I don't have to pass the global state and dispatch function from the app component that would be very helpful.
Thank you.
Asam💥💥💥
As I noticed clicking the ParentComponent Button it also effect the child component(whre we consumer contextAPI) ,is there any way to solve this,Means I want one compoenent donot change the counter value in other ?
perfect
What is the Major difference between useContext and Redux ? and if kill the app, useContext data will store or killed when again open the App?
Really Good!!!!
We don't need consumer with context here? Or am i missing something.
Yeah, we don't need consumers that's why we are using useContext hook to consume it. I would recommend you to watch useContext hook video 15-17
😍
We are using the same code in three components. Is there a way to get rid of repetition
Take Component F as the lowerst level of the component that is responsible for providing the buttons. Then in Component A and D, replace the code for the buttons with just Component F. E.g.
function ReducerContextComponentD() {
const countContext = useContext(CountContext)
return (
Component D Count: {countContext.countState}
)
}
My state does not update immediately. Why is that and how can it be fixed?
are you using a useState or useReducer? consider useEffect and the dependencies
@Codevolution when we use initialState as an object it gives an error how can we handle it?
Share your code so people can help
TypeError: Cannot read property 'count dispatch' of undefined
when a click on buttons any solution
I had the same. In component A I did not import CountContex as a named component {CountContex}. Hope that helps