Global State with Context in React - React context

[Music] what's up we're going to create a global state with context in react in this video so let's get started as usual I'm going to bootstrap it with create react app so in my terminal type MPX create - react - app and I'm going to call it the global stayed test yeah all right that's our bootstraps app and I'm going to navigate inside a folder so CD global - state - test and I'm going to clear the console and I'll open up my code editor going to clean this one out a little bit I'm going to remove the files that I don't need I actually have a video on this also where you can create your own theme with create write app so you don't have to do this stuff all the time so look around my videos and you'll find out one it's actually quite handy so I'm going to remove all of these here I'm just going to need the index and the app to tears I delete them and also inside index I'm going to remove stuff here that I don't need for this tutorial something like that and then inside app I remove these ones and for now I'm just going to return give our app we can start this one up to see that it works NPM store - bump this one up also a little bit more like this and we have our app there and that's great we know that it's working I'm going to schedule out one more component this one and I'm just going to call it I think cool component dot Das and I import react from react I create an error function with my cool component like this and from now I just return my cool component text like that and then I export default to component do some more formatting and save it and then I'm going to use it inside of my app file so I import cool component from dot /qu component and I can actually yeah we can show it here like so and save it and you have it that's our cool component no our cool compound it should say component come home and like so so back to our app and we're going to talk below the state in react you have both local state that is local to your component and you can have global state and global state what people reach for before was often Redux for example that can man that handle the global state for you and you have reduced some stuff like that and action creators in this case I'm going to show you how to create a global State with the regular use state and no reducer and to be honest I don't use the reducer that much you also have a hook now in react that's called use reducer so you can have a reducer also and simulate the Redux workflow but I actually don't use that that much I like the you state to have it like a regular state just that you make it global with the context since the hook version of react it's become a little bit easier to handle context and I'm going to show you that also so first of all I'm going to create another component here that I call store yes so we're using the Redux naming convention here we are creating sort of a store here that's going to hold our state and this is going to be the heart of this tutorial because it's in here I'm going to do the heavy lifting with the context and create a stay so first I import react as usual I'm also going to import you state for this one from react just as usual then I'm going to create an initial state and I'm just going to call it initial state and it's going to be a regular JavaScript object and in this case I'm going to add the name and for now I can have my own name and then I have another property that's called email and I can have my own email there as well so that's good enough for now then we're going to create the context itself and we're going to store that in a Const and we have to export it because we want to import this context in the components that want to use it so export comes and to keep it simple I'm going to call it just context and react has something that's called create context so from react dot we call create context and this will create the context for us that we're going to need and for now we just keep it clean like this we don't send anything in here we don't have to do that now and of course I have to have an equal sign there right so that's our context we create the context and keep it in these cones that we call context you can call it whatever you want it doesn't matter then I'm going to create my component it's going to be a component that we can use to wrap our application and this component will provide our application with our state so I created a new error function call it store and yet again you can call it whatever you want either structure out the children and children in react is a built-in prop that we can grab when we wrap things inside of this component I'm going to show you this in a second so we have an arrow function and inside here I want to create my state now I'm keeping it simple and just call it state and set state and again of course you can call this taste whatever you want are we going to call you state that's the hook in react that we use for creating state and for this one I'm sending in my initial state that's the one I created up here and this is going to be an object with two properties the name and the email so that's our state we have the state here we do some restructuring that's the way you create state in react your the structure of the state and you also the structure out the setter for a state right then we return and we're going to return from our context we have a property that's called provider so our context dot provider and we're giving it a value and for this one we're going to give it the state and the setter for the state so this one will provide our application with our state and the setter for the state so we have the state and the set state life so an inside of the context provider we are going to return the children and that means that everything we wrap in our store is going to be returned inside of the context provider and that's great so you can't really see it now it's going along here that's because I have this crazy big font now so it's actually really hard to work with this font but I need to have it so you can see what's on my screen so we have the contact provider we provide it with the value of the state and the set state and inside of the provider we render out children that we're going to send him to the store so this is how you make the store provide everything to your application and it may look a little bit tricky in the beginning if you haven't worked with this before but I think if you just look at it some more time and try it out in different apps and different stuff like that always try things out I do it like crazy when I learn new stuff I just create new stuff and change things and everything like that and you're going to understand it I think it's not that complicated actually when you get a hang of it alright so say this one we have our store no actually I have to explore it of course export default store like so so that's our component that's our store component I save it I go back inside of my app component and we're going to use this store now so up here I can import store from dot forward slash store right F now we just have a div here but if we wrap it in our store instead we change this live to a store this cool component is going to be the children in our store that's the one it's getting here and we wrap it with a context provider and render out the children here so I hope this makes sense this is actually everything we have to do in the app because now I'm going to show you how we can grab this state and modify it from the cool component because now we have successfully created a global state and a set of a state that's all there is to it in its simplest form you can of course and maybe should sometimes if you're working in a really large application have some more complexity to it but this is in its simplest form how you create a global state with context in react so let's get back inside of the cool component up here I first going to import my context from and we have the context in our store component in a store file we created it here and that's why I exported it because we want to import it in the component where we're going to use the state and that's the one I import here and that means we now have access to the context for now I'm going to create curly braces here like so and in react we now have a hook that's called use context so this one I imported up here and by calling use context with our context we have an easy access to our context it was a little bit more difficult before we had this hooked so this is actually a really great hook so const with the structure of the state and the set state just as we create a regular state in react but now we use context instead and we give it the context and this one will give us access to the state and the sub state ok and what are we going to return here we can actually create a fragment don't need to have a div there and inside or fragment yeah you can make an h2 tag I'm a cool component and we have a P tag with a name and I'm going to return from the state state of name that is going to be my name as I set that as the initial State and I create another P tag with my email and we grab that from state email ok so I can save this one and show you as you can see here I'm a cool component yeah and then this is actually quite a cool name also there's some dude there does that has the name tomasbym phone and I think he's really cool actually alright so that's my name and that's my email we're successfully grabbing this these values from the global stayed as you can see here because we don't have the state in this component we're grabbing it from the context and this means that in every component where you want to grab something from the state you can just import the context and you can grab the state like this and I also want to show you how you can modify the state with a set state so I'm going to create the button it's going to have an on click Handler and we're going to create another function that we call handle click and click me like so I create this function here Const handle click and it's an arrow function it's going to be a sink because I have found the little nice API where you can get random users random names and random email addresses and stuff like that so I'm making this on a sinc function what we're going to hit that API now I'm going to create the calls that are called person first I await then I have to have wait yet again cause I'm going to convert this with JSON so you have to await these two times because first you wait the data that you grab from the API and then I'm going to convert it with JSON to get it in JSON format so a wait fetch and end point is UI names don't come forward slash API and then you have to also add question mark and exit if you want to get for example the email address and I want to grab that one also and then I have dot JSON at the end to convert it to JSON so as you can see here the first wait is for this one and the second way is when we have grabbed this data and I convert it to JSON I could of course split it up into the and the Const here maybe that would make it easier I don't know for now this is good so we can console.log out the person just to see that we get some data so save it and I'm going to show my console here click the button and here you can see here we getting a person here I click again I get another person so it will create this random fictive users for us to use in our application and that's great and now we know that we get this data so we can set our state set state with the person and as you can see here we have a lot of more properties here than the name and email but it doesn't matter because it will overwrite the old ones and I will just show the name and the email so for this little tutorial it doesn't matter I save it and if I click this one you can see that each time I click I get a new name I think you can just call it if it was seven times in a minute so it will soon break on me here I think yeah it's broke there now because I call it too many times one two three four five six seven eight nine ten times maybe this per minute okay I hope this makes sense to create global state where the context it's actually a really really great idea in react and to be honest when I have worked on really large applications there's a lot that don't use something like Redux you can just have some local state and you can have the global state that you want with the context for example if a user logs in and you should keep track on the user that's log in you can have that in the global state you can also have for example different languages in the app and stuff like that so this is cool I think I hope you also think it's cool make sure to subscribe on my channel I will provide you with tutorials like this on a regular basis and I also have already a lot of cool tutorial if you check out my channel see another one

Channel: Weibenfalk

Views: 8,477

Rating: 4.9744411 out of 5

Keywords: development, coding, react context, context api, react hooks, react context api, react hooks tutorial, web development, react tutorial, useContext, useState, development economics class 10, development class 10 economics ncert, development class 10, global state with react context, usecontext hook, usecontext hook in react, react

Id: tnt2y7D3V9o

Length: 17min 42sec (1062 seconds)

Published: Tue Mar 03 2020