Redux Toolkit + Redux Persist Integration to React Application in MERN Stack

created the sign up and sign in uh you know functionalities but now what I want to do something is you know if I look into my application if we go to our application in here and you can see that there's no react Redux and I have to put react Redux because there's going to be actually a state that you know when I sign in uh you know it should F fill so to do this we actually need a Redux toolkit for this and we have to set it up so um you know we could have access to our user data um in different places within our applic just like uh you know we concluded before so to get this set up we have to go and head over to Redux iph toolkit um. j.org and then we go here you'll see that there's Redux toolkit official opinionated batteries included tool set for efficient Redux development get started go all the way to Quick Start and then Redux toolkit quick start introduction welcome to the Redux toolkit quick quick start tutorial this tutorial will briefly introduce you to Redux toolkit and teach you how to start it start using it correctly how to read this tutorial so use a summary over here we have to install Redux toolkit and Redux react Redux so basically we need to install two dependencies one is Redux JS toolkit and the other one is react Redux so we just copy this and we have to go to our terminal and remember where my you know my you know front end was working so I'm just going to create another terminal in here so you could just add a plus here uh this is just separated or I'm just you know messed up here and you just add in a split terminal here so right here you could just add one more and now there's three now um you know just put it in the client folder so from the client and inside here you might have to right click and say npm install at Redux JS toolkit and re react Redux if I uh you know press enter this should install this for me um you know and after some time everything should be working perfect and then you can see that the server has restarted Ed for the changes that were done in the front end okay great now that we have done that we have to go and create a Redux store um you know create a name file named and then Source app and then store.js import the configure store uh API from Redux toolkit you'll start by creating an empty Redux store and exporting it so this is the code that they provide us we'll use JavaScript here but the thing is we have to go here and inside the client folder inside the source folder inside that we actually need to create a folder which is which is going to be called Redux so let's just create a folder here and we'll call it Redux and inside this folder we'll have to create a file which is going to be called store.js so store.js like that once we have that we'll paste the code that we got from that um from that and we'll just paste it here so we'll just paste it right here so right now this is not the right code that I got so I'm going to go back let's just remove this and let's go back to that website and just copy this clipboard and just paste it here so we're just going to contrl + V and you can see over here we have uh the code that's you know configures the entire thing so it's actually uh you know import configure store from Redux JS toolkit and we have export const store and then we have the configure store and we have the reducer as an empty now the thing is we actually need to do something here and which is very important um so the the thing is that we have to um add in some cases here so we'll have to go to the uh reducer and inside here we'll you know put a comma after that we'll have to put middleware this is just some settings that we need so that we don't get any issues or errors so get default middleware and then we put in this arrow and say get default middleware and inside of this we put in some setting which is going to be called serializable check to fault so that you know it doesn't require us to serialize our variables uh and it doesn't give us that error um this is just a must that you need so that you don't get an error and then after that we could just put a semicolon for now and this is like uh the go-to thing we need but the moment this is done we have to go to the main. jsx file which is over here and in the main. jsx file what you have to do is you have to import this store that you created so what you could do is you could go in the bottom here and say import um the store so essentially you could say import the store uh from the you know slash Redux it should uh you know maybe it's um SL Redux and then store there you go so um once you have that store added you could uh simply once you have the store added you could simply use the store um within this so instead of you know uh once the store is done you could also add your provider so you have to import that as well so import provider and that's from react Redux all right and now we could go inside of this tag and um we could just say instead of react strict mode we could just say provider which is coming from react Redux and we say the store store is equal to the store that you basically imported from that store application that you created over there so something so uh you know is fine over here everything looks good um now what we do is um we have to go back to the documentation and you can see that this is done but we have to now provide the Redux store to react um and we're going to have to do that but we have to create a new react um you know we created this um we created this I mean we provide the store Redux store to react we provided the store and the provider and we did this uh you know this instruction which is perfectly done now we have to create a Redux State slice and we have to actually see that over here we they creating a counter slice to you know track some counter or something but we have to do for user so we'll have to use a uh this to create a user slice so let's go back here and um to create a user slice we go to the source folder and inside the uh Source folder we I mean we have to go to the Redux folder and inside the Redux folder we're going to create a new folder which is going to be called user so inside this we'll just call a new folder which is going to be called user and inside the user folder we're going to create a new file which is going to be called users slice. JS all right after that once you are inside the user slice um you could actually uh you know import uh the following so you could just say import uh create slice and this is from react Redux okay so we're basically creating a slice and now I have to set some initial values so essentially the con initial state for this uh slice would essentially be uh as follows so you have the current user remember uh if we go back to our you know client and we had that um you know source and we had the pages and we had the signin page if you remember we had some error handle uh you know setting errors as like null and loading to false you know just like some parameters parameters that we just set before the application so that you know you have a like in case you have some kind of error when you try to log in then that uh you know error becomes true and also this loading State when you know you try to call the API you set loading to true we have to do something similar similar for this react Redux so what we have to do is we have to do an initial State and remember just like how we created um um these like things like for error and loading uh we're going to do that similar here so first of all let's have a current user to track the current user and we'll call that as null for like like the default stuff the default values and for the error you could just say at null right and the last thing is the loading for uh that person and that should be false we're not loading anything so we'll just keep it as false all right so now after that we could just close this in and now we're done with the initial State perfect now after that we have to create the user slice and we could say const user slice and we have create slice and inside this will give the now you can see my uh copilot is super smart and it's telling everything so in this we have to give the name and we could just call the name for the uh the slice as user um now the initial State you know this initial state that you basically created you actually use it in here in this slice so you the slice that you're creating right you put the initial state in here after that you use the reducers parameter and this is basically a bunch of functions that you create these are the bunch of functions which will have you know different kind of you know things like what we did before and I'm going to show you what they actually mean so you know uh initial State and we're going to uh start out uh with with all this stuff all right so we have um we have okay let me just go back so over here we have reducers and in here we have this so the first reducer that we might use is sign in uh start so sign in start means before signing in um you have a state essentially and that state will be loading is true so if I could yeah so you could see that the state. loading this value which is over here loading that turns true if you know you start the sign in process so far we have one right now we could create another one which is sign in success so once the signin success is created we have the state and the action and this action is going to come back as a response from the database and say if the you know the state if it's working we have the state. loading as false we don't need to load anymore the state. current user um is going to be action. payload this is actually the data that is coming from the database so we can just put it on the top uh the state loading is going to be false and then we don't need that and then state. error will be null so that's there and the last one is sign in failure in case you have an error so you could say the state again the action from the database and you could say if uh you know an error happens just say that the're loading you could just you know consider like the same flow you could have the set state. loading as false and then you could also say that no you don't have to load anymore and you don't also have to say action. payload so action. payload will give you an error and then you'll put that state accordingly so these are all your uh you know reducers that you've created but the thing that we have to do now is we have to close this out so we'll close this out like like this sorry like this so you can see now this squiggly bracket and then the round bracket is there and then semicolon but the not the next thing that we might have to do after this is we're going to have to export these um you know export these um reducers so we say export const sign in start sign in success and sign in Failure from users slice. actions all right and that's basically importing it um and you could also export default user slice. reducer so now essentially you've exported it perfectly ex um and now you could use it um in your uh other parts so once we have all of this created uh we have to add slice reducers to the store so if we go down over here you could see add slice reducers to the store um you know we have all of this state done you know export default increment decrement this is what they did and then you know counter slice. actions um and this is the same thing what we did but we did counter user slice. actions um you know this actions what you see and you can see those actions that are being exported and also you know the export default counter slice. reducer and that is essenti export default user slice. reducer perfect uh you know everything looks amazing um and the next thing we're going to do is we're going to add slice reducers to the store all right so then uh to add the uh slice reducers to the store we have to go back to our store.js and we have to import counter reducer you know like how they're doing but we're going to have to import our own so we'll go to the store.js what we had and in here we're going to have to import the U if we go here store.js yeah so if I go back to the store.js we have to import the the the reducer that we created so import what is it called user reducer so I'll say user reducer from and then you can see over here we have um uh the same if I if I I'm I'm assuming that it's the correct sequence I mean navigation here so if you go to source and we go to the Redux you can see over here but where in is store store.js but actually where we have to go is the user folder so it's actually from inside the user folder and then user dot user slice if you can see over here um uh user and then user slice perfect so we have the user reducer Here and Now what we have to do is if you look into the documentation uh it says the same thing what we do is you know you have the um you use it over here as the reducer so essentially you assign it like that so over here in the reducer section you could essentially say uh the reducer is set to user and that is user reducer that is uh from there and essentially now everything should work um and one thing we have to do is now we have to use Redux State and actions and react components the last thing um and we can uh we can dispatch now these uh functions um to our react application so you know it's a pretty easy way to do it we use selector and use dispatch from react Redux we also um you know add in the reducers that we want to might use and then we initialize the dispatch and then we might have to just use them over here so it's pretty simple process um you go to the signin jsx file that we had created over here now you're going to do some pretty basic stuff so we're going to go to the um you know the sign in. jsx file and over here we're going to put in the things that we need so let's go to the sign in. jsx and in here where're first of all we're going to have to import the things I don't know why set is over here so import use navig uh link from react R and then we have this okay now from here we'll have the following now you can see it already told me that I'm using dispatch so it says use dispatch and then from react Redux this is a hook um and we can dispatch the uh you know function we have with this so after that we have um you know import and then now you could see that we created remember those sign in uh sign in uh start I think believe and then we had sign in success and then sign in Failure from dot dot you could see over here SL rux if I go and you could see that uh we have to go back and then we have to go to the Redux page and then uh folder and then we have to go inside uh the user folder and in there uh you know it should have all the so uh you know according to that it should work so let's see um yeah yep perfect so we have okay now I knew this is Redux and inside that we have user and then we have user dot user dot user slice all right so this is the thing that we needed um and now that we have all this imported we could essentially use this um so let's go and inside the sign in um you could now just use that you know handle thing that's happening so when when you know you're trying to handle this you know load where you're sending the loading to true instead of that you could just dispatch the no the hook now this is a hook you could just dispatch the you know the function that we created which is sign in start all right and that's all you need okay so once you dispatch that you could actually do the same thing here if there's an error you don't need to do loading or error false right you could now just do dispatching again and you could say um dispatch and inside not event but dispatch and inside here we could have sign in failure and then we have data. message now where's this data coming from you already know where this data is coming from it's a state that we created ear uh earlier so one minute so if I look at this data is this data that's coming from here and the same thing goes for the bottom part here which is you know set loading false and set error null we could just dispatch it again and sign in success will be the data. user perfect and now on the top um which is where you created your two states right here you don't need these anymore and what you could uh just do is you could just call const dispatch and use dispatch okay so basically we're using dispatch um and then we call it dispatch and that's why it's saying dispatch here uh which you could see dispatch event okay and then you have dispatch dispatch I got it I got it so it's better to just have it as dispatch um so instead of dispatch event so yeah that would work but just keep it like this so it's consistent um and perfectly aligned all right all right so then last thing that uh you know you might want to do is is you also need a use selector so if we go here we'll go to the dispatch uh right after the dispatch you want to have uh you know the loading and error but now the loading and error are actually coming from that Ed selector and then the use selector State and essentially this is coming from um this is also coming let me just quick fix this okay come on come on come on not giving me any okay I I actually need to import it so it's going to be control and space yeah from Redux so we have use selector imported two times for no reason okay and obviously it adds some extra thing for no reason all right so we have use selector so we have cons loading and error and we have equal to use selector and then inside we have that state and that state. user um I'm actually referring to this uh you know loading and error over here so this error uh you know this state from the user so initial State you know that's what we're talking about and we're saying get that and you know use that loading and error and then you know you're getting all of this stuff uh you know from there and essentially it's all going to be working working fine and that's why these all are consistent and I want to break the code so um if you want to check this out in your Chrome I would recommend getting this Chrome extension which is called Redux um Redux Dev tool Chrome extension now this is Redux Dev tools CH Chrome uh Chrome extension and it has 1 million User it's good and it's featured so we could use this one ADD extension so once we have this extension one of the great tools I've ever used before all right good review all right so what we can do now is we open up inspect but let's see this is our application open up inspect okay you can see over here there's this I item as well but if you go to inspect and you go all the way here you could see profiler component and then you have this Redux option now this is your extension now what happens is that um there's this diff tree raw Okay now what's going to happen is let's suppose we create uh log in with some existing you know account I remember that we created multiple accounts before and uh if my thunder client saved the activity that we've done um you could see that this account exists so we could use this one and the password and see how this stores it in our uh section let's see email and the password is this okay so I believe now we could just sign in if I sign in you could see that it signed in for me and over here you could see that we have um this okay perfect we have uh three raw undefined all right so um let's refresh this page all right perfect so we have to refresh it and now you could see it's not going to have anything but you could see at the moment you have uh user and over here we have current user we have error and we have loading you might be asking where's this user current user and error all coming from remember that user slice that we created we're having the name user and then we had this current user um and then we had error and loading these initial states are there being popular to current user and then we had um you know null and then we have error null and loading false perfect now we have have to log in so since I refreshed I have to log in again so uh sign in um now again it still the same but let's let's log in with that account again so you know I think it's yeah I think it's this one and then the password is this okay so now let's sign in so now you can see that it's logged in but what happens now is that the error is null okay and the loading is false but if you check the user yes you could see over here that the sign in start happened and the signin success happened and you could see that the action is there so this is amazing it tells us that's logged in I'm just I can't find the um user action ID but I'm looking for it let's see if I could find it oh yeah so I can see over re the trace is there um this reducer was activated but we're trying to navigate and see how we could find the I'm having a hard time finding that but let's see if we could find it this is a nice slider we have sign so we had over here initially in it and then we had uh sign in start and then once we had sign we have sign in success okay so let's go and uh see this action State error okay perfect so let's go and see where this uh you know thing is we could go to the application and in here we could go to the local storage and in here we could go and to the HTTP local you know Local Host over here you can see that there's actually a key and then there's a value um at the moment there's nothing remember after applying all these Redux toolkit changes I was actually facing a error and you know I wasn't understanding what was happening so you know you could see over here that you know it was undefined I had to refresh it and you know I had to go to the sign-in page and try to see what's going to happen but now everything is fine and I'm going to tell you what was the fix so like if I suppose if I give a username that is existing in the database if I click on sign in you could see all these uh you know signin start triggered and you know in the signin start I basically set my user Fields user Uh current user to null error was null and loading was true which it means it's it's loading and then after that once it's loaded it's false and you could see the error is null and you could also see the current user now finally having the values that were're existing within the database meaning that the payload is actually being saved inside of this you know the payload is actually being saved here the reason I was getting an issue be in the beginning was if if I go to the sign in. jsx I made a small problem here so in the you know remember I removed the states the loading and error and I replaced them with these state from the user state. user now user you might be asking well we created the username over here so we're just using this slice and we're using that state specifically for the loading and error and loading an error are over here okay so the thing is that over here we B basically dispatch we use a dispatch hook to basically use those functions those reducers and then and when we try we do a sign and start if we get a failure we say sign in Failure right and we put a message which is coming from the data do message and one other thing that we had to recognize here is that this uh you know data do message will be the error and then after that if it's a success we didn't have to put data. user which I did before it was actually just simple data and this is just going to populate the entire uh code so you know the data state was over here um essentially uh it's basically coming from here you know the response and you just put it inside there that's why it's being saved so you know all things are working fine over here uh and that's why you know uh I was having that issue but then after that U for the catch part you could just do the same thing like you did for the failure signin failure over there after that um everything seems fine and we could now go and test it finally so I'm going to my application and over here you can see that the state is you know perfectly loaded but the problem comes when I refresh the page you could see now that everything is gone and this is a problem uh like if I click it on in it you could see that the current user now is null and I didn't want this I don't want the user to re you know have only the state only preserved and uh until when you refresh it it's just going to go away that's not the thing here so the solution to this is Redux persist we're going to have to install this dependent and see if you go to the terminal and go to the client folder what you have to do is npmi and you have to do Redux hyphen persist like this this is going to basically store the thing inside of our uh local storage and we'll be able to access it globally all right it's going to be able to store it in our local storage uh what I'm talking about is um suppose if I go back to the uh thing over here we go to the application and we have this local storage uh we're going to have this you know stored so essentially right now that was just uh there because of some extra things that I was doing before but now if I you know refresh the page that thing is gone from the local storage you know like suppose if I put it over here log in now basically once it's logged in there's nothing in the local storage I want something in the local storage I'm using I'm going to actually use Redux persist to store something in it so that whenever I refresh the page it you know still has it over here you can see the cookie and this is already you know done earlier uh we've done all of this stuff um and then we have the session storage and it has nothing but the thing that we have to concern is the local storage and in here we have to populate some values so that it preserves it and let's go and do it so let's go to the store.js and inside the store.js we have to add some of the extra things that we need to you know add so first of all we have to go here and we have to uh initialize root reducer so the root reducer is going to be a combination so combine reducers for the um um you know the the user uh user reducer that you created earlier right that user reducer right over here and essentially we have that right that one right now so you know we're okay with that so this is our root reducer after that once we created our root reducer we could actually now go into our you know store and um we got to we could actually create a variable again and this is going to be called persisted um persisted reducer you know we trying to save in the local storage so we say persisted reducer is equal to persist reducer so persist reducer and these might be coming from other places so like you might be asking where am I bringing this um you know persist reducer from so this is coming from um so that's actually coming from wait a minute so P persist reducer is actually coming from um this part over here in Redux so it's going to be called import um combine reducers from Redux so actually it's going to be uh combined reducers from at uh Redux JS toolkit and and um we also need the the persist reducer and this is something else so just a second uh what we're going to do is inside the persist reducer we're going to put two things two parameters we have the root reducer that we created and we also have the persist config that we need so I me let me just have the persist configuration it's some kind of a setting that we have to add and inside here we have the root reducer and we just put it like that now over here we have to you know Define our persist config so persist config is just you know setting and that says like the key for the U uh the local storage would be root the uh storage would be storage and the version would be one so one okay so now all of this is set now I actually need to import uh this persist config okay the persist config and actually the persist um essentially I think I uh didn't add persist okay so I'm going to have to import uh persist and that's from Redux hyphen persist all right and this storage is actually coming from import storage from redex hyen persist lib and then storage all right so we're good to go for now and inside the store we have instead of user reducer that we're using right from initially like over here you could understand that I had this user hot Callin user reducer and you know you might be asking where is this user reducer coming from well it's coming from the user slce that we were exporting right here so we actually created this but what we want to do now is we want to call it uh in terms of the complete um persisted reducer all right so we're going to call it persisted reducer which is this one and now that's our reducer um now the next part here is we're going to have the export and it's going to be called export and we call it const and we have a name called persistor and we're going to get that from a persist store all right the persist store is also coming from Redux persist so where's Redux persist over here we have persist store in here don't worry this is all easy stuff all of them are is going to be super easy because basically they're storing the data in the local storage and persist store is going to help us do this as well using Redux hypen persist which we actually imported right now you know the npmi if Redux persist so all of this is perfect let's go to the main. jsx file now and inside the main. jsx file all you got to need to do is out add just one cool thing so um first of all you're going to have to import persist gate okay so persist gate and this is from Redux for integration and react now um what you're going to do in remember the provider and store that you added over here inside of this you're going to have a persist gate tag so persist gate and um it's saying essentially the uh loading for this these are some uh you know parameters that you have to give would be null and the uh persistor would be the persistor same um you go close this you could close this here all right so now let's just format document okay so now that we have this persister now this you know everything seems fine we actually need to import persistor and I believe it's not imported so uh we need this one so persistor is also pretty simple it's from the store um so you know this one um it's called persistor it's from uh rux and then we have the store you could just put the JS for now it's just like it's a good way to not have errors so this basically it's coming from the uh you know store.js that we created and you know we're basically exporting this persister so we're able to use it here and this is basically the entire settings for you know that um and we we're now going to be able to store it in our you know um local storage and it's not going to go away even if we refresh the page so let's check this out and let's go into this application let's go to inspect and uh let's go to the uh you know the extension which is Redux okay so now let's look at this uh quickly and you could see right now at the moment um right now you could see null null uh um values so let's just refresh once okay so we have current user null error null and loading false let's log into an existing user so let's first log in with wrong password let's see what happens now it says over here it says invalid credentials and it's says the error you know it's it went from the States you could actually scroll through these states so uh you know what happened was that rehydrate and then after that sign in start we Tred to sign in uh the load was there and then after that sign in Failure happened and then the load fals and then the error was invalid credentials pretty awesome okay um we could now put the right credential so let's put the well boom I don't know why this happened but let's go back H boom okay not boom um let's go back here uh let's go back to the Redux Redux Redux Redux come on okay so uh you could see that you know the invalid credentials were there refresh it once uh now everything is gone no no it still preserves that um but since you know I have that persist on okay so it needs arguments you can see IL illegal arguments undefined string and I'm have to put the password so I'm going to put the password here and let's go and now you can see it's logged in now what happens is that you could see the the states and we're in the signin success part so you could see now that the current user finally allocated and the error is null and the loading is false and this is sign in success what happened the reducer that we called and you can see over here we have our values plotted perfect refreshing the page and will have the values in the State uh H yeah rehydrate and there you go we still have them existing which is amazing it's still there if you go to the application over here and you could see in the local storage now there's this persist brot where do we call this root remember that value that we uh you know added over here this key root that's the storage over there the storage and then the version one all of this persist config you can see that the root name and then the key and all of this ID and you could see over here uh this is all the information regarding the users login so it's not the password or anything cred you know secret but you know things that we could use um to basically populate inside of our application okay so that's really nice if I refresh it it's not going to going to go away which is amazing um and now that we have everything you know settled we actually could just you know use this for our next parts so this is our token remember that we created and the best part about this is that um the you know the response basically in the network tab if you go to the you know response which is actually in the network Tab and essentially there's a lot of pages going on um so let me just refresh once Okay so so there's uh a few amounts of pages but I'm trying to find that response uh sign in okay these are just values and you can see over here these are some of the responses that are coming client uh local storage headers okay so you can see over here that this was uh these were the latest but I guess the latest should be over here okay so react icons Mongoose local storage okay this is switching okay response I think it's maybe this one no not sure but yeah everything is uh you know looking fine looking perfect and everything looks amazing great job and we can now move on to the next part where we're going to basically now uh add Google authentication here so for the sign in and the sign up Pages we want Google authentication so you can log in or create an account using Google

Channel: Coding Cleverly

Views: 1,446

Keywords:

Id: 1CpLlKJHw5c

Length: 39min 17sec (2357 seconds)

Published: Wed Jan 10 2024