How to build an eCommerce Website using React Redux, GraphQL, Firebase #8 – Redux Hooks

this is the eighth video of this video series on building an e-commerce website using react Redux graph QL and firebase in this video tutorial we're going to be looking at redux hooks specifically looking at the use selector and use dispatch hooks and this is a follow on from the previous tutorial where we looked at react hooks but of course as Redux is a separate library to reiax I wanted to cover it in its own tutorial before we get started I just want to encourage you guys to check out our official YouTube channel that is simple youtube.com forward slash simple Tut I also want to give you guys a direct link and a shout out to visit the official playlist for this video series of course at the end of each of these videos I am not only uploading it to YouTube but I'm adding it to this playlist which you can find by either visiting my channel directly or I will be posting a link in the description of this video additionally I want to let you guys know that there is an official github repository for this project you can find that on my official github page that's github.com forward slash simple tat and find this repository of course I'm also going to be posting a direct link to this repo in the description of this video as well and finally of course please do visit our official website that is simple to comb but of course I also want to ask you guys to like comment and subscribe your support means a lot to me but let's go ahead and make a start on this tutorial in this video tutorial I'm going to be talking to you about two redux hooks the first is use selector and the second is use dispatch now these do opposite things use selector is used to get data retrieve it from the Redux store and use dispatch is used to dispatch actions that will eventually update the Redux store now apart from that I'm also going to be refactoring the code within our application so that we can adhere more to the true design patent the true Redux design pattern we're also going to be using thunk middleware so that we can actually call functions within our functions and that's how we're going to be working with dispatch as well but we're gonna cover that further into this tutorial now before we get into any of that I also want to talk to you about how I've structured this series and the last two tutorials so in the lust at the start of this series we were writing more traditional react code we use functional components where we could but where we needed things like lifecycle hooks or state we actually started off writing classes these are stateful components and that's absolutely fine and eventually we introduced redux where we had state management that allowed us to significantly improve our code but as we've gotten deeper into this series I wanted to give you guys as an in-depth understanding of react as a concept in addition to actually the core project itself which was building an e-commerce website so what I've actually managed to do and what I'm hoping to have done and achieved is to also get to this point where we're looking at more cutting-edge react code we're now looking at using react hooks and Redux hooks etc going forward which is why in the last video of this series we took a we we refactored the components in our application to use react hooks now what our react oaks react hooks is basically functional components but we use react hooks so that we can access and use state within our components and also other hooks like use effect in replace of things like lifecycle hooks but of course Redux is an entirely different library and for that reason I wanted to separate the refactoring of the redux part of our code from the react Oaks tutorial which is why in this tutorial we're going to be covering Redux Redux hooks and that brings me to the first component that we're going to be refactoring and of course the first Redux hook that we're going to be looking at which is the used selector hook and the first component we're going to be refactoring is our header component and I want to demonstrate exactly why so what we're currently doing in our application is we have some static links in the header which is giving the user an option to either register or login if they login we offer them different links and we allow them to either visit their account page or to logout now the way that we're doing this is we're getting the current user from the Redux store within this component and then we're conditionally rendering different links so let's come back over to our code and actually figure out how this is currently working so let's go into our header component and as you can see we're using this connect function now the connect function is technically there's nothing wrong with that I mean it is working I just demonstrated that but react but of course we're using react hooks so we should be using Redux hooks because they work very well together but they work slightly differently so let me go ahead and show you how that works so the first thing that we want to do is remove this connect function because we don't need this anymore we don't need to import that and then I'm gonna come down here and I'm going to completely remove this line of code and instead of using that connect function where we export our component I'm just gonna go ahead and export the component we don't need to do anything else there now the next thing that I want to talk to you about is this map state to props function because we actually still need this but we're gonna call it something a little bit different but before I show you that I'm gonna cut it because I want to move this to the top of my file and what I really want to focus on is the name that we've assigned this function because I think that's the key to helping you guys understand exactly how this works so previously when we use this map state two props function let's think about what we called it we were mapping the state from our redux or to the props of our component well with the use selector redux hook we're not mapping it to props anymore in fact we can just access the current user object directly we can access it directly from state so instead of saying that this is going to be called map state two props we're just going to rename this to map state because this is not going to be passed to the props of course we need to import the hook itself so we're going to import that from react redux which is called the use selector hook and what I'm going to do is where we D structured the current user before from props we're gonna replace props with the use selector hook and we're gonna cool this as a function and pass it our map state function directly and believe it or not that's all you need to do that's exactly how they use selector redux hook works so I'm gonna save those changes and I'm gonna come over to my web browser and I'm gonna loop I'm gonna sign in again using the same test account so I have this account called Joe Bloggs at outlook.com and I'm gonna sign in with the same password and you'll see that it works exactly the same I'm redirected to the home page and as you can see the links in the header have updated and if I log out they change back we're now ready to look at the second redux hook that we're going to be using in this tutorial which is the use dispatch redux hook okay so let's take a quick look at our sign in component so of course this is our form where we're calling handles submit this is our asynchronous function and currently we have a try-catch here which is where we actually handle signing in the user using the OAuth library from firebase now we want to move this try-catch into a new action we haven't created yet so in actuality this this function is not going to contain any asynchronous code so we can remove this async keyword but of course we still want to capture the event and we still need this line because it's it's preventing a page reload every time the user hits that submit button to login so now that we've commented that out what we need to do is create the act the action that we're going to dispatch here so to do that we need to come over to the Redux folder the user folder that contains the user actions J's file now currently all we have is this set current user action that we created in an earlier tutorial and it's a much simpler functional so Ola an action is within the Redux ecosystem is a function that returns an object and usually it contains just a type and a payload now in this case the action that we need to create is a little bit more complicated but I'm going to explain it as we go so we're going to call this action sign-in user and it's going to take two things which is the user's email and these are password and notice that I've destructured it here we're also going to pass it dispatch and this is obviously also going to be an async async function because this is where we're going to move our try-catch to now before I take this code I want to move this the cool we make to reset the form and where we redirect the user I want to move that outside of the try-catch but I'm going to comment it out for now and again it will become clearer why I've done that in just a few moments so let's take the rest of this code this try-catch and let's move it into our new action that we've created our sign-in user action now as I said before we're going to be using the use dispatch redux hook so let's implement that so that we can dispatch our action within our sign in component so what we need to do is at the top of this file we need to import two things the first thing we need to import is going to be from react Redux and that is going to be the used dispatch redux hook itself the second thing that we need to import is going to be the action that we just created itself so that's going to be coming from redux user and user actions and as you know it's called sign in user now to use dispatch within our component we need to first of all we need to create a Const called dispatch and that will equal we can call use to use dispatch hook we call that as a function and that will give us extra access to dispatch and then we can use that to actually dispatch our action the sign in user action that we created and we'll call that as a function and we'll pass it the the email and password that we're we have from state so we'll pass an email we'll pass that as an object so it'll be email and password as a semicolon and that's all we need to do in order to dispatch this action but the work isn't done yet now the first thing we need to I need to draw your attention to is our our user actions so as you can see currently we're using this o'the library from firebase but we haven't imported that into our our actions file so first thing you need to do at the top of this file is import that from our firebase utility file that we created in an early in one of the first videos of this series and of course we are exporting this earth library so this is our firebase utility file we created this in one of the first tutorials of the series and as you can see here we are exposing this old library which is what we're going to be using within our our action here now as I said this is a slightly more complicated action that we're trying to dispatch here but of course if we sign in the user there's no way for us to receive a call back from this from this function right so how would that how would that work because we need to do two things we need to reset the forum and we need to redirect the user once they've actually successfully signed in I mean that's what we were we were doing before right so what we actually need to do is we need to dispatch another action within our sign in user action that will update the store and then we can subscribe to that within our sign in function and when we detect a change and a success event we know we can trigger these other events so again hopefully that makes sense if it doesn't don't worry just follow what I'm doing so let's come back here and what we need to do first of all is create a new type so let's come over to our user types file and we'll create a new type and we're gonna call this sign-in success okay it's going to equal a string which will just be the same now that we've created that we can come over to our reducer and we're going to create a new case right so the first thing we'll do is create some some new initial State so we'll just say sign-in success and we'll set it to false and what we then want to do is create as I said a new case so we'll say case user types sign-in success and in this case we will return the state but we're gonna change the sign-in success to equal the action dot payload save that we've updated our reducer 4 to handle this case so what we can now do on our sign-in user action is use the dispatch that we're passing to it and what we want to dispatch is an action and first of all we need to define the type which is again going to be user types dot sign-in success and the payload is going to be true right because this is our success case right so now that we have this logic in our Redux store we can come back over to our sign-in component and we're going to subscribe we need to get the value of the sign-in success from our Redux store so to do that I'm going to now import in addition to use dispatch to use selector Redux hook and what that will allow me to do is above my component here I'm going to create a new constabie called map state right we're gonna get the user state and then what we can do is we can get the sign-in success from user dot sign in success and what that will allow us to do as well is to get that from the redock store so we can then call const equals use selector and pass it as a function pass it our map state function and we can D structure the value from that of sign-in success and then we can actually use that to detect when the user has successfully signed in and we can do that using the use effect read it react took and the way that that will work again so up here we're gonna call use effect and that takes a function and it takes a dependency and what we'll do here is we're going to pass it the sign-in success as a dependency so whenever this changes the value of sign-in success whenever this changes and and remember by default this is going to be false because when we define our reducer our sign-in success is by default it's false but when we actually sign in successfully we dispatch another action that will change the value to true so in the component whatever this changes we're gonna have a condition here which is whenever sign-in success is true evaluates to true we can perform some kind of a success event and this is where we want to call the the code that will reset the form and push the user to whatever route we want when we sign in which in this case is going to be [Music] the homepage so let's clean this up and save the file and now I want to come over to the browser and I'm gonna show you show you something and also by the way we're not using this earth middleware here anymore so we can just we don't need to import that anymore now let's come back over to the browser and let's just reload and let's come over to login and let's try and login with that test account again so Joe Bloggs an outlook.com enter my password and you're gonna see that I get an error and this is a very interesting error and I deliberately I missed something out I didn't tell you something because I really wanted to hit this error so I could make you understand exactly what I'm about to tell you so let's read the error and and figure out what it means so it says actions must be plain objects use custom middleware for async actions and it's highlighting this this code here which is where we dispatch the sign in user action so let's come back over to the code here and let's let's figure out what what this means so let's come over to our actions and remember here this action right which we know works right everything worked before is a function that that simply returns an object with a type and payload but our sign-in user action isn't it's an asynchronous function that dispatches another function so it actually what effectively we're doing here is we not only have an asynchronous action here but we're calling a function within a function now to do this we need to we need to use redux thunk middleware right because and this is what we use redux funk middleware for and that's how we're going to fix this so all we need to do so we need to install some new middleware which is going to be called so NPM install Redux thunk right so this is the thunk middleware we need once that's installed let's just restart our application so NPM run start and let's head back over to our text editor now that we have this new middleware we naturally need it we need to pass it to our store so let's come back over to our create store file and as you can see we have this middlewares array that we pause to this apply middleware function so at the top of the file we need to import this new middleware so we're gonna import thunk from from redux thunk and then all we need to do is pass this thunk middleware into our array and of course this is already taken care of we passed this as an array originally because it allows us and we knew we would want to pass more than one middleware to to this store so that's fine so now let's come back over to the browser and let's just reload it to make sure everything's nice and up-to-date and now let's try and log in again so we're gonna say Joe Bloggs and again this is my test account that I have locally just enter the password and login and you're gonna see that again everything is is working as it was before the header updates we can logout everything's working the same so let's come back over to our code and as you can see everything is working as as expected but if we look at our sign-in component we have you know again simplify this component greatly we've decoupled the the logic that handles signing in the user we've completely decoupled that from the component which is really the true much more in line with a true Redux design pattern and and really how how this component should have always been written but again I wanted to write it in this way so that I could gradually take you through the process and and and I think in again this way you you'll gain a much greater understanding of how Redux works with with react okay so now that we finished refactoring our signing component let's come over to our sign up component and this is going to involve a lot of the same steps but it's going to be a little bit different at the same time as well so it's going to be it's going to be interesting to refactor this component so so let's make a start now just as the signing component it has this this form with an on submit event which calls this handle submit function again we're going to be removing this try catch and where we handle the errors we're going to be removing this from this dysfunction entirely and moving it into another action so again has its not going to have any asynchronous code so we can remove the async keyword we still need the the line that handles the event and preventing the default action so again we're ready to create our our action so let's come again over to our user on actions JS file we're gonna call this well we need to export it but we're gonna call this function sign up user and again this is going to be it's gonna require a few more fields than just email and password so looking at this we have the display name email password confirm password so and this is going to call a function which will accept a display name an email password and a confirm password again that will accept dispatch and it will be an asynchronous function and what we want to do is just copy for now this entire block of code and simply move it into our our action and for now what we'll do is we'll just uncomment that and we'll just save that and we want to do is just import this into the component and dispatch that as as an action within this handle submit function so as we did before what we'll need to do is import the same hook so we're going to import this from react redux we want to import the use dispatch redux hook and as we did before again we need to import the action that we just created so it's gonna be coming from redux user user actions and it's called sign up user and what we want to do within our component we're going to call dispatch so dispatch equals use dispatch call it as a function that gives us access to dispatch so we can use dispatch and we can pass it our sign up user action call it as a function and we'll need to pass our display name the user's email password and the confirm password as well now within our sign up user action the first thing that we do is we compare the password with the confirm password and if they don't match then we attempt to show an error to the user and we return out of this function immediately so that we don't proceed any further now of course this set eras function exists on our sign up component and we don't have access to it anymore within our sign up user action itself so we are gonna need to replace this with again we're going to need to use dispatch to dispatch another action that we can subscribe to on our component so let's come back over to our user types and we want to add an additional type and we're going to say sign up error and it's going to equal a string we'll pass it the same value as the key and then we can come back over to our reducer and we want to add some additional state which is going to be sign up error and again by default this is going to equal an array and we need to add an additional case which is going to be user types dot sign up error and in this case we will return again the state and we will pass the the sign up error the action the payload and we can save that and what we will now be able to do is come back to our sign up user function and we can dispatch another action we can give it the type of user types dot sign in this our sign up error and we'll give it the payload of our errors array also okay so now that we've covered the error scenario before we actually implement this into our component I also want to cover the success scenario so currently just as we did before we're using this earth middleware to to register the user with the email and password because we've already validated at this point if we've got past this this block we validated that the password matches the confirm password so we can just continue and of course we have this handle user profile function that we our utility function that we're calling and this currently does not exist within this file we haven't imported it and again this handle user profile function utility function is coming from our firebase utilities file this is another utility function that we created earlier in this series in an earlier video tutorial so we'll need to import this into this file as obviously we've moved this logic out of the component and then of course again we were we have some other events that we we fire on the success case which we're going to need to move out of our action but of course we need to dispatch a success event so what we'll need to do is come back over to our user types file and what I'm gonna do here is I'm going to create a new type which is going to be sign up success and again it's going to have a value which will be a string and we'll pass it the same name as the key we'll then come over to our reducer and we'll add another case which is going to be user types dot sign-up success and in this case what we're going to do is return and objects with the state but we're going to change the initial state which we haven't created yet which is going to be sign up success but default this will be false but in this case we're going to change it to equal so sign up success which will equal the action dot payload cool so all we need to do at this point is dispatch that that that success action so we can then dispatch this action so again the type here is going to equal the user types objects which has the sign up success and the payload is going to equal true awesome and again we can just cut this here and save the changes to the file cool so now that we've refactored the code here and we've created this this action let's now come back over to our sign up component and complete refactoring this component so all we need to do is now subscribe to get those events those changes from our redux tour now we don't need to import these two things from our firebase utilities file anymore we've we've removed that out of the signup component itself but we need to import of course from react the use effect hook and also from react Redux we need to import the use selector and the first thing we need to do is create that map state function so map constant map state equals with the structure of the user state and then we need to we need to get two things first of all we need to get the sign up success which will be user dot sign up success and we need sign and we need sign up error which will equal user sign up error awesome so to actually get access to this all we need to do is the structure that from use selector and we'll pass it this map state function and then we can just simply do structure it so sign sign up success and sign up error and then all we need to deal with in our component is use this use effect hook which accepts a function and it takes the dependencies array and we can perform these checks so the first we actually need to have two and the first one will have a dependency of this signup success and the second will have a dependency of signup error so let's handle the success case so if the sign up success is true and the user has successfully signed up then what we'll need to do is pass it this reset function which will reset the form and additionally we need to push the user to the home page because they successfully signed up now regarding the error case well the checks we'll need to perform are going to be a little bit different now of course the default value here is going to be an empty array so the first thing we need to check is that it is an a valid array so we'll say array dot is array and we'll pass it the signup error and then the additional check we need to do is we need to check that signup error the length is greater than zero which means that it has returned an error now if this is the case we need to use our signup our signup errors function which will reset the state of the component which will change the state of the component to the value we pass it which is going to be this signup error array itself cool so we can save that and just look at the code really quickly just to check everything looks ok yep everything looks good so let's come back over to the browser and I'm getting an error here okay so I've just missed here this arrow because it was obviously it's equals to her this is the year 6 syntax to to be a quote and creating a function let's change that here save it's come back to the browser great ok let's go over to the registration page the first thing we want to do is check that it errors so let's enter well let's enter a name so the full name is going to be Jack black and the email address will be Jack at outlook.com and the password let's set this to actually return an error first of all so let's say 1 2 3 and confirm will be 1 2 3 4 so this should return an error and as you can see we get the error message correctly so let's answer a valid password and confirm password here and let's try and register yep so I'm signed in I'm registered and I'm signed in so I can obviously move around the site as I want and I can of course then logout I could come back over here to log in with that account I just created so the email remember was Jack at outlook.com and enter the password login and again as you can see that account was created because I managed to sign in again ok so now that we've completed the refactoring of our sign up component we're ready to come over to our e-mail password component here and work on refactoring this so a lot of this is going to be very similar to the work we did refactoring our of their components but of course is again a very important component so let's go ahead and refactor this too so just as the other components we have this form which calls an on submit function which again doesn't need to be asynchronous anymore we're going to move this entire try-catch out of the component so we need to call an action here but we haven't created that action yet so let's come over to our user actions file and what we want to do here is just create a new action so we need to export this as well we're gonna call it their reset reset password and it's gonna take the user's email and we're gonna pause it dispatch but what we want to do here is well this is also going to be a sync and all we need to do here is just take the contents of this try-catch and move it in to move it into our action and I'm probably going to move this config I'm probably going to move that outside of the try-catch cool so we have this success callback and we have this this we catch any errors currently so of course this is cooling prompts we don't have access to that within our action anymore so we're going to need to move that back into the component and we don't have access to the set errors function either so again we're going to need to dispatch two more actions here just to handle just to handle these these events within the component so to do that we need to come over to our user types file and create two more types the first type we're going to create is going to be called the reset password success gonna take a string with the same values the name of the key and we're gonna create another one which is going to be called reset password error and again that's just going to take the the value of the name of the key itself cool now that we have to find those types we can come over to the reducer itself and create the initial state so this is gonna be reset password success and but if all this will be false and we'll have reset password terror and by default that will be an empty array so we then just need to create the cases so we'll create the first case which is going to be user types dot reset password success and in this case we're going to return the state with the with the reset password success equal to action payload and the second case that we're going to create so that's going to be user types dot reset password error and in this case we're simply going to return again the state with the reset password error equals to the action dot payload perfect so let's close this file and we're now ready to actually dispatch the the action itself within our our reset password action so let's use the dispatch to dispatch the action so it's going to take a type the type will be equal to the user types dot dot reset password error and the payload is going to be true cool and in the error case we're gonna again use dispatch and we're gonna set the type to be equal to the user types dot reset password error and the payload is just going to equal the error itself cool so now that we're handling that these events let's just remove this code here that we commented out earlier we're ready to actually come back over and use this action within our component so this is our email password component we can remove this import from our firebase utility file we don't need that anymore what we do need from react itself is to use effect hook we need to import something from react redux we need two things actually we need both hooks we need to use dispatch hook and we need to use selector hook and of course we also need to import the action we just created as well itself we can get that from redux user user actions and it's called the reset password action okay so we need to first of all create our map state with the structure the user state first of all and we need two things so we need the reset password success which will equal the user dot reset password success and we need reset password error which will equal user dot reset password error and then within opponent we can access that by simply creating a constant which D structures from the use selector cool that as a function and pass it on map state function and then we can D structure the reset password' success and the reset password error we also need access to dispatch so I'll create another consul dispatch which will take the use dispatch redux hook will call that as a function and then within our handle submit what we can do here is we can simply dispatch that action so we'll say dispatch and we'll pass it our reset password action cool it as a function but we need to posit the users email cool so now that we're actually handling that we need to subscribe to these two this well basically we need to update the component and handle the events for success in error to do that we're going to use the use effect hook which takes a function and at the dependencies array we're going to duplicate this twice because we need it we need it twice the first case is going to be for the reset password success and in the event of this value changing we're going to evaluate the value and if it's true that we're simply going to push the user to the login page to to log in now to handle the error event we're going to pass this use effect hook the reset password errors array as a dependency and again we need to evaluate this for being an array so we'll say array Don is array and we'll pass it the reset password array and we also want to check that the reset password' array errors array the length is greater than zero which means that it contains an error now if this is true if this evaluates to true then we're going to call the set errors function and we're just going to pass it the value of the reset password' error and that's all we need to do in order to de Kaap decouple the logic that handles firebase from the component and to implement the the redux hooks so let's come back over to the browser we can access the reset possible page by going to login and reset password at least that's how I've coded this application let's enter a random email that does not exist so we'll just say test that email com so we should see an error here and as you can see we get the valid error let's enter a valid email so we created this one for Jack outlook.com and as you can see I'm redirected to login because that that email exists at this point we're ready to refactor the lost component within our application and that is our app dot J's file now within this file we're using we're still using this connect function from reacts at redux and this is some legacy code that was written when this component was actually a class and what it's being used for is actually to map dispatch to props because we're dispatching this action which sets the current user in our Redux store we are actually getting the current user object from the the store we are getting that value but we're actually not using it anywhere within our code it's it's just there but we're not actually using it so we can actually just remove this in this entirely but again we don't want to use this connect function anymore instead we want to use the use selector Redux hook so what we're gonna do is down here where we export our our component our app component we're gonna delete this line and we're gonna replace it and justice and we're just going to export the app component directly and that's all we need to do there and then we can actually just completely remove the map state probes function and the map dispatch as well we don't need either of those and we're already importing this action up here already because we were using it before so the only thing that we need to change is this line here directly and what we need to do is instead of doing this all we do is we say Const dispatch because we need access to dispatch so we'll say use dispatch we'll call that as a function and then all we need to do is where we're using this action which is in these two places we just need to wrap this with dispatch just like this that's all you need to do and then we can save the file and again let's come back over to the browser and let's just look into one of our accounts so Joe Bloggs outlook.com and we'll just set the password as well and login and as you can see we're still getting exactly the same functionality in the site we've now refactored all of our components to use redux hooks but there's one last thing that I want to give you guys as a bonus to this tutorial which i think is going to just again really improve the user experience so if we come over to the login page I want to show you something that you may or may not have noticed all right so if we go to sign-in with Google and we just sign in with an account I'm going to do that now you're going to notice that we're not redirected away to the home page we are logged in you can see that because the links in our header have changed and I can of course I can log out but if I was to log in with an email so for example you know jack had outlook home and my password then you can see when I log in I'm redirected so why is that not happening when I sign in with with Google so let's come back over to the code and let's go back over to our sign-in page and figure out why this this is happening so the way that it currently works when we sign in with an email and password right is we're subscribed to this success state from the redux or whenever this changes this is where we redirect the user and we handle that success event this is not getting dispatched for when the user signs in VAR Google because we're actually using this middleware this utility function that we created we're using this directly on this component so what we need to do is refactor this a little bit so that it will work in the same way that it works when we dispatch an action to log in via our email and password so let's do that it's a really simple change but again it's just really it's expected user behavior so we should really adhere to that so the first thing we need to do is we need to create a new function on our component and I'm just going to call this cons to handle Google sign-in and it's just going to equal a function looks something like this and we'll the first thing that we really need to do is create our our action itself that we can we can call with dispatch but before we can do that even let's take a look at something so we have this sign-in with Google this is the the file here we actually don't need this here anymore which is coming from our firebase utility file let's come over to that file so it's in firebase and utils and let's just collapse all of this down so it's a little easier to see this is the sign-in with Google that we're currently exporting right I'm gonna comment this out I don't want to write it in this way anymore this is we're gonna turn this into an action rather than a utility function what we need to export is actually this it's so we're gonna say export Const our Google provider right and let's just take this and we're gonna move this into our Redux action so this is our user actions let's just paste that here now what we want to do is at the top of the file where we're importing from our farva's utility file we want to import that Google provider that we just made available from that file right and then we'll come down here and what we want to do is it is gonna just it doesn't we're not gonna pass this function anything but it is going to take dispatch right and it is going to be a sync right and we'll just paste that code there that we we took previously so before we write this any further we're just going to take this and we're going to input that into our sign-in file and where we import our actions at the top here we're gonna import this additional action and let's now scroll down the page and on our button where we're calling this sign-in with Google previously were cooling that directly we now want to say handle Google sign-in so this is that function we created here which calls dispatch and this dispatch is where we're going to dispatch our new action which is that sign-in with Google action and now we need to cool that as a function so let's come back over to our actions file and we're gonna do something here so what we're going to do is we're going to put this in a try-catch right so we're gonna have a try-catch which will take an capture an error then if we want we can console.log the error but for now we're gonna comment that line out now notice here that we're using this library and again as you guys already know we already have access to the auth because again we're importing that from our utility file as well and what we'll do here is we will await this that's an important keyword so we're using that async/await keyword but we're gonna remove that semicolon because we want to use this then call back and this is gonna allow us to pass it a function and on this and then what we're going to be able to do is if we come up here to this action we created to signing the user here we dispatched this action here with the sign-in success type right I'm gonna copy that and I'm gonna put that within this then call back so in this case we're dispatching an action which tells our application we've successfully signed it right so let's now save that and come back over to our browser and let's come back over to login and let's go sign-in with Google we're still getting the pop-up let's sign in and you'll see this time I'm not only logged in but I'm also redirected to the home page there is something really important I need to show you guys so the first thing I'm gonna do is I'm gonna head over and login I also have some redux developer tools open in my dev tools the first thing I'm gonna do is I'm just gonna sign in with my test account so jacket outlook.com and the password and let's click on sign in and what I'm gonna do now is I'm going to log out of the application and I'm gonna click on sign I'll log in again and you're gonna notice I can't no matter how many times I click login I can't get into it I can't I can't I just can't do it so now let's go into this the redux tour and let's figure out what's happened why this is happening so looking at the user state from a redux tour I can expand that so I successfully logged out you can see this user object is null but the sign-in success is still true the reason is we dispatched an action that would set this to true so we could redirect the user once they signed in but we never reset this so when the user logged out when the user actually logged out they never actually we never reset this back to false which means that because in our code if we come back over to for example our sign-in component this use effect method runs every time the component mounts so because this will this by when this component loads because this will be default to true this is going to redirect the user every time you try and visit that page so what's the solution well the solution is that every time that you successfully login you need to reset those values so to do that we need to create another two actions we need one for we need another reset action right so what we're gonna do is we're gonna come back over to we're going to come back over to our redux user and our user types and we're just going to cool this reset both form forms and we're going to add a new case for user types dot reset both forms in which case we're going to return the state but we're gonna reset all of these fields so we're going to reset all of these fields back to their initial values the only field we're not resetting right is our current user right that's the only one we're not going to we're not going to reset so we can close that now and we just want to create a simple action which we're going to export as Const and we're just gonna say reset all Earth forms and it's just going to equal a simple function and we're just going to return an object with the type of user types dot reset or forms right and then what we can do is we can come back over to each of these forms so we can come in to for example we can come in to our sign-in component and when we import our actions we can import the reset whole forms action and now when we reset this form here we can dispatch another action here where we reset now currently we've done this for sign-in we also need to do this for signup so when the user is successfully signed signed up here we want to dispatch this action here as well so we'll do that we'll need to import that as well from our actions here and finally we're also going to need to do this on our email password here so over here where we have our email password we have the success event and it's very important you do this by the way before you redirect the user but we want to of course dispatch this action as well here remember we need to import it from our actions so now let's come back over to the browser and let's again let's come back over to the login page so let's just reload this in the browser too and let's try that again so let's login so jacket outlook.com and enter the password we get redirected let's look at the state now so you can see if we come to the user you'll see that all of this has been reset it it's all false so if I log out now I can actually come over here and if I go back to login I can I can visit that page successfully okay and that brings us to the end of this video tutorial where we looked at implementing redux hooks into our application in the next video we're going to be looking at adding user levels in an admin level and an admin control panel where you can add start adding your products to the store but before we can sign up from the tutorial let's just head over to the terminal I'm gonna check in the code and as you can see I'm just going to push that up to the repository and of course I just want to remind you guys that at the end of each one of these tutorials I am creating PRS and I'm gonna merge this with Monster so that if you want to compare the code I've written in this tutorial or again you just want to look at the application yourself or a clone the repository feel free to do so I will be pushing this PR and with master once again I just want to thank you guys for following this video tutorial but if you haven't already please like comment and subscribe

Channel: SimpleTut

Views: 7,395

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, react hooks, useEffect, useSelector, useDispatch, redux hooks, useState

Id: U39qSt-t3RM

Length: 66min 54sec (4014 seconds)

Published: Sun May 31 2020