How to build an eCommerce Website using React Redux, GraphQL, Firebase #6 – Setup Redux

welcome to the sixth video in this tutorial series on building an e-commerce website using Reax redux graph QL and firebase now in this video tutorial we're going to be implementing Redux into our application now before we get started I want to encourage you guys to check out the official github repository for this project at the end of each one of these tutorials on creating PRS and merging with masters so that whenever you guys want you can come over to this repository you can compare your code with mine you can just browse around the project or you can even clone it to your desktop and run it locally this is a fantastic resource for you I will be adding a direct link to this repository in the description of this video of course I also want to encourage you guys to check out our official YouTube channel which is youtube.com forward slash simple Tut not only to see our other content but of course we have an official playlist for this video series which you can find again a direct link to in the description of this video alternatively you can just browse our Channel and find this playlist one of the great things about react is that it has a one-way data flow and what that means is that you can't pass props from a child component to its parent component you can only pass props from a parent component to a child component and this is good because it makes it easier for us as developers to debug issues but that isn't always the case sometimes depending on the scenario what you're building in the area of your application you may find that you're passing props down through several layers of components until eventually you can access the component that you're trying to provide this prop to has access to it and this can become and this is referred to within the react world and community in a number of different ways sometimes it's called tunneling sometimes it's called drilling but what it basically means is that you're passed props down through several layers of components until eventually you reach the one that you're trying to pass this prop to and and that can become can become quite difficult to manage especially as your application grows and you begin working with more and more properties and I can already show you an example of that in practice within our application so within our current application our header component is using our current user objects which contains the user object that is currently logged into our application it's also the object we're using to determine the current users or status of whether they're logged in or not and the header component is using that to display to update the UI to either show links to register or login to the application and or it's showing a different link if the user is logged in to log out of the application I can show you that so if I log into the application here you'll see that I get a different link in my header which is of course to log out of the application now let me show you this in the code so if I come over to my text editor you'll see that within the root of our application which is app GS we have this current user object which is in our state and eventually we're passing that down to our layout and our layout is passing that to our page components so again this is our layout component here we're passing the props to our header component which is here so we're actually passing props down through several layers of components here just so that our header component can utilize this piece of State so if I show you our header component here we're getting that current user objects from our props and then we're using that to conditionally render an unordered list within this component itself now this is exactly why you would want to use redux because it allows you to not only persist data within our application but it also allows any component within our application to have access to state without having to pass props down from a parent component or anything like that so now that you know exactly why we need Redux let's implement it into our application and use it the first thing that we need to do is install the new dependencies that we're going to be working with so let's head over to our terminal window and install those dependencies the ones that we need to install so npm install are going to be Redux itself we want to install react redux and we want to install some middleware that we're going to be using which is the redux logger so let's just go ahead and install those and restart our application and PM run start ok so the first thing that we need to do is come over to our source folder and create a new folder which is going to contain all of our Redux code so I'm going to call it redux and the first thing that I'm gonna do is create my first reducer which is going to be my user reducer so I'm gonna create a folder within the Redux folder called user within the user folder I'm going to have my first file which is going to be my user the types Jas and this is going to be quite simple it's just going to be Const for user types which is gonna equal an object and we're gonna export default user types and we're going to set this type to set current user and it's gonna equal a string of the same thing which is set underscore current underscore user and some of this code may make sense to you if not then just follow along I'll try to explain it as I go and and certainly if you actually look at the code once once I've written it I think it will definitely make sense to you as things start to you know come together so within my user folder I'm gonna create another file this is going to be my user dot reducer is this is gonna be my actual reducer and what I need to do is import my user types from that file my types file so user dot types and what I need to do first of all is create some kind of initial state so I'm gonna create some initial state and it's going to have my current user objects but initially it's just going to equal null then I can actually create my reducer finally so I'm gonna have my constant user reducer it's going to equal a function which will accept some state and we're going to pass it that initial state as default but it's also going to accept an action and then what we want to do is we want to have a switch function and we're going to base that off of the action the type because our action has to have a type that's a requirement by default we simply want to return our state however we're going to have one case which is going to be user types dot set current user and if this matches then we want to return an object with all of the current state but we're going to set the current user to acts payload we can save that I'm going to add a semicolon here and I'm going to export this so export so export default user reducer we can save that and I've successfully created my first reducer the next thing that we want to do is actually create our route reducer and again this is going to be within our Redux folder so within our Redux folder I'm going to have a new file and I'm just going to call this my route reducer j/s and this is going to be a fairly straightforward file all we need to do is import at the top here so we're gonna import from redux there we go we want to import combined reducers and we're gonna use this more as we build this application out but for now the only reducer we have is our user reducer so we're gonna important that from the file we just created so user slash use it up reducer and I'm just going to export default it's so export default combined reducers we're gonna cool that as a function we're gonna pass it an object with our user reducer so we're gonna have user and our user reducer okay so what I've done so far is I've created my first reducer which is my users reducer but what I haven't done is actually utilized this anywhere within my application right now these are just standalone files we have a route reducer here obviously that has a reducer but we don't actually have a store we're not passing that to our application so you might wonder why I've done this first well the reason is quite simple combined reducers expects at least one reducer at least one piece of state so I didn't want to actually try and initialize the store without actually configuring my root reducer first now that I've done that I can actually create my store that I'm gonna use within my application so let's go ahead and do that so within my Redux folder I'm going to create a store I'm gonna call this create store ojs and again this is gonna be quite a simple file so what we want to do is first of all import from again from redux we want to import create store and apply middlewares and we also want to import our logger this is the middleware that we want to use within our application that's gonna help us with development and I'm gonna demonstrate that to you a little bit later but it's our redux logger we installed that at the same time that we install redux and react Redux and finally we want to actually import our route reducer and again we just finished creating that file so the first thing we need to do is just define our middleware so I'm actually going to export this individually too so we're going to export Const middlewares it's going to equal an array of the middleware that we want to use at the moment that's only our logger now with that we're ready to actually create our store so I'm going to say export Const store equals create store which is a function that accepts our route reducer and the applies middleware function and we're going to call that function and pass it our middleware so although this will have created our store and we've exported both of these constants I'm gonna add at the bottom of the file export default store because it will just make it a little bit more convenient for me when I'm using this in my application okay so that's our store done and we're actually ready to use that and where we're going to use that is actually in our the root of our application which is a index.js file now within this file we need to import two things the first thing we need to import is from react redux and that is the provider and the second thing we need to import is our store itself we just created that it's inside of our Redux folder and it's create store so the first thing that we need to do here is actually wrap our entire application with our provider so I'm gonna go ahead and do that then all we need to do is just pass our store oops to our provider and what the provider is going to do is it's actually going to make the redux store available to our entire application which is why we need to wrap our provider around our entire application that's why we're coding it this way awesome so at this point we're actually ready to use this within our application we've actually created and linked up our store so if you remember if we come over to the browser I mentioned previously that I wanted to use this within our header right so let's actually update our code to utilize redux and our store within our header rather than relying on it being passed down from a parent component so within my components folder let's go to the header component index jjs and as you can see currently we're using the current user which is coming from from props now interestingly enough we don't actually have to change our component here at all right because we're actually still gonna get current user from props it's just not gonna be passed down from the parent component we're gonna be getting it from our Redux store so I'm gonna collapse the header for now and I'm going to import something from from from from from react Redux which is connect and what connect is going to allow me to do is create a new Const which is map the state to props and we're gonna get some state and we're going to be able to pass that to our application so what we want at the moment is this current user object we're gonna get that from state so I'm gonna say current user and we need to basically get that from States so there's a number of ways I can do this but before I do it I want to kind of slow down and try to explain what I'm doing here so let's come back over to the Redux folder let's go to the user folder and look at the well let's look at our route reducer so this is our state's object and currently we have the user object which is on our state so let's first of all let's actually D structure here from our state the user object alright so let's use that but let's come back over now to our user reducer and see what we're actually going to have within the the user object well we have current user and current user is what we actually want here and by default it will be no but if if there is a payload then it will actually contain the user object so let's come back over to our header component and we can say dot current user and this is going to provide our current user object but we're not actually connected to the component yet so we need to use this connect method and we'll just wrap that and the first thing we want to do is pass it map state to props and again we're not going to be dispatching any actions within our header component so I'm just gonna pause null here and we can save that and what I can do now is actually come back over to my app.js file which is where we were originally passing this current user object to the parent component we do not need to pass that anymore so I'm going to remove this from all of my layout components we don't need to pass that down anymore because we're getting that from our Redux store so let's come back over to our web browser you're gonna see that if i refresh the page we shouldn't be seeing any errors but if I log in with Google or if you're already logged in so let me do that he's gonna go ahead and login now you're going to see that although the functionality of my my my page my application is not changed it was redirected away I'm not seeing the change in my header and the reason is because the current user is is actually coming from the store and currently we're not updating the store when the user is logged in with the current user object right because if we look at our code which is here in our component did mount on up J s we have our oath listener which is what we use to actually update the state currently but we're not actually dispatching an action here to actually update the state we're still updating this local state within our application so this is why we need to just we need to create our redux action and this is how we'll actually update the store rather than the state so to do that let's come back over to our redux folder and in the user folder I'm going to create another new file which is going to be user dot actions das and full redux action is is an object with a type and a payload and you can see that if you look at the reducer itself which you can see here all it is going to be using is this type and the payload which is in this case the current user object so what we want to do is within our action here first of all we want to import our user types so user types from our user types and then we can just say create sorry export cost and we want to create this set current user action which is going to basically equal a function that will accept that user current user object and it will simply return that function is going to return our our object with type which is going to be the user type set current user and it's going to have a payload key with the user object now although I've created my set current user action that I can use to update the Redux store I'm not using it within my app J's file I'm still using the the state of the component to store the current user and I'm also using the current user object here for restricting access to certain routes so in this case I'm actually redirecting the user if they're logged in away from the registration and look in pages because they're already logged in there a user because they're logged in so that they don't need to see or access those pages so what I need to do is I need to get the value of the current user from the redux tour because I'm using it within this component and I also need to dispatch the action to update the store instead of updating the state when they are logging in so let's actually handle that so the first thing I'm going to do is I'm going to import this set current user action that I just created within fjs so I'm going to import that so I'm going to import that from the file I created which is Redux user user actions so it's set current user but I can't use this directly I need to dispatch it using redux and to do that I need to import connect so we're going to import that from react redux we're going to import connect but obviously we need to where we export our class here we need to explain eed to wrap it with connect like that but this accepts two things as I already demonstrated within the header component the first is where we can map state to props the second is dispatch so we need to create both we need to create map state to props and we need to create map dispatch to props and these can actually be called anything doesn't matter what you call them but this is pretty much industry standard so we haven't actually created this at all we've just tried to use it which would error so we're gonna create first of all map state to props and this obviously will receive state we're gonna be structure again as we did on header user the user state again this is going to return and objects with the current user which is just gonna be user don't corn user secondly we need to have a dispatch so I'm gonna say Const map dispatch the props and again this is gonna take dispatch like so and what it's going to do is return our set current user and what we want to do is we're going to get the user object which is the current user and we want to dispatch our action which is going to be our set current user action that we imported up here and we're just going to pass it our user and again this is going to be used in our payload so that is all we need to do but we do need to update our application a little bit so currently we're trying to get the current user from state it's now going to be coming from props otherwise the rest of the code in the return function remains the same what we do need to tweak a little bit is how we actually update the state because we don't need to update the state anymore we need to update the store so to do that we don't need this constructor anymore we also don't need any initial state here this is all handled by redux and our user reducer and also here rather than using this offset state we simply say this the props dot set current user and we can cool that directly but we also don't need this current user object we can just return this object directly so let's go ahead and do that and the same thing is we can do here when the user is locked out rather than passing this initial state we will we can just say a list of props dot set current user and past that the we can actually just pass it our user auth object here because that will by default return null anyway if the user is not logged in so because we're actually using this in two places I'm going to actually just D structure it from props I buddy up at the top so I'm just gonna say this the props will sort of grab set current user and that means that rather than saying this stuff props we can just say set current user in both places and that is all we need to do so cool now let's come back over to our browser and just reload the page a couple of times so I'm actually currently logged in you can see that it says log out so you can actually see already that it's working but let's log out and you can see I'm able to browse the pages correctly and let's go to sign-in let's sign in and let's click on my account log in and as you can see I'm redirected to the home page and I still see log out so it's again we've restored the same functionality the same logic but rather than using state within our application we're using our Redux store and they gain if I now come back over to my dev tools and and I perform some kind of an event like logout you can see because we're using our middleware which you can also see from redux and create store we're using our logger middleware because I'm using that middleware this is a really great feature because it actually shows me the the events that are that take place within my Redux store and this is something that we're going to look at a little bit more later on in this video series but for now I just want to make you aware of it because it actually shows the action that's dispatched and the the changes to the store as and when they occur thank you for watching this video tutorial as always i'm going to head over to my terminal window and i'm going to check in the code and after i sign off on this video tutorial i'm gonna be merging this with master and of course following this video tutorial i'm gonna be merging this with master of course if you want to take a look at the code I've been writing than just simply head over to this repository and compare your code with mine but of course as always thank you for following this video tutorial I look forward to the next video where we're going to be looking at user roles that that's basically where you can restrict access to different user levels for example an admin versus a normal user but of course that's for the next video but of course for now I'd really appreciate it if you guys can of course subscribe to the channel like comment

Channel: SimpleTut

Views: 8,022

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase, react router, react router dom, routes, routing, Google Sign-In, Google Auth, Google Sign In Authentication, login, signin

Id: Ppbp1ylW8GA

Length: 30min 16sec (1816 seconds)

Published: Sat May 16 2020