Node & React Redux Tool Kit with Typescript

hello youtube welcome to this video video series uh regarding react redox toolkit in timescript and note in timestream so i'm gonna be making this series for you guys to know how to create a full stack application all in typescript and essentially using the redux toolkit library in order to manage state in the react site personally i've been having a lot of how do you say a lot of obstacles trying to learn uh redux now i believe that redox toolkit the dev team have done uh the dev team has done an excellent uh work regarding implementation documentation how to set up redux is really really easy and i want to show you guys how to do it i think there's a lot of potential in the in the library and well if you like it i hope um you know you can leave that like uh if you're not subscribed yet please subscribe and let's go to the tutorial [Music] [Music] okay so we are going to start creating our folder for the project so right now what i did is going to document i have a folder in youtube and i just created this one called mirn football and i probably should call it learn soccer because it's actually soccer not football so mirn soccer so there you go i just renamed it and i'm going to go inside of that folder which as of now it should be empty i'm going to open my vs code and that way you guys can see exactly what's going on all right so obviously there's plenty of things to do right now we're not going to be able to finish obviously in this video i'm going to try to get as much as we can done so i'm going to try to get some of the back and done and some of the front and done but again it's a little bit complex but still at least you guys have like some sort of um i don't know idea of how to use typescript with node and react and how to also set up a redux toolkit so what we're going to do first is create our npm project so i'm going to do the following npm init dash y so that's how we're going to have our node oh actually you know what let's remove the package.json because i want this inside of my backend folder which i don't have it yet so i'm going to create it so make directory i'm going to call this backend then inside of the backend folder which by the way now you should see this i'm going to do fpm init dash y so now we have that then i'm going to install express i'm going to install mongoose um i think that should be well of course yeah let's install install cores and then um let's see if i'm missing something i believe i'm missing like json web token or something other sort coors express okay let's install express validator very useful let's install big crypt um okay i'm gonna install those so like you guys don't have any errors make my we install those things but there's two more that we want to install so we also want to install timescript json web token dot emv very important and big reports that hear me express to the mango okay that should be all of it okay we will oh okay oh i misspelled dot dot m so i'm just going to install everything again [Music] just in case and don't worry if you like reinstall this if even though you already pre-installed this it's not like you're going to install multiple uh folders you're just like mpm is just going to ignore the ones that you already have so don't worry if you click npm install same packages over and over uh also npm i now this stands for dependencies meaning that you you don't really need them for production but meanwhile you're developing development they're needed and we're going to install ts node and ts node dash dev so those are the only two other packages that we we're going to install and that's it and then the last thing that you want to do is initiate the the product so i'm going to type tsc which stands for why maybe i'm missing a flag so let me google type script i believe it was tsc in it but oh okay npx and then with the flag okay so it's mpx actually i do have it installed globally but let's say that you don't have it installed which is fine npx psc for typescript dash dash in it and that's it so with this you see the logo here you see all these things and that's it we are done with the backend now meanwhile i set up the back end i also want to start installing the front end so i'm going to do i'm going to back out of this um by the way you should be seeing i'm going to put the side by side so you can see it okay so here's my back end and here's my ts config okay so i want a directory out i'm gonna do npx create react app i'm gonna call this front-end because i'd like to do that and i'm going to put template type script i believe that's the proper command but if the command is not done properly we can just delete the whole directory and try again because i'm not sure if it's templates or template but i'm 98 percent sure it's template all right so that is going to take like a minute or so so we can just go here and we're going to go into our config.json so i'm actually going to do command b or control b to have this full view right so we want to do a couple of configurations there uh we want to do the following we want to make sure that we have module resolution to node so we just do command backslash or control backslash that's the only thing that we need to do in order to uncomment this we also want an you know an output directory which should be so i'm just going to do the search out there there you go so it's here out directory and i want this output directory to be inside of a build directory um so i'm going to put that there then what else is modular drop true force consistency true straight true i think that's about it yep so that's it that's literally it now okay and it's finished so let me check yep so this is properly done if you see a tsx it means that the command was done properly okay so i'm just going to did i yeah that's good okay so i'm just going to close this for now and then i can make this big again uh so again we only need to have these things right which i think we only change two things but also the build we need to make a directory here so i'm gonna make a new directory a new folder and i'm going to call it build why is that because everything that we create in in that script is going to be compiled inside of the build and what we're going to deploy to production is what's on the build folder and you'll see how later on but for now let's focus on like the basic things i'm going to go ahead and i'm going to create a new file i'm going to call it um oh my god okay i'm gonna call it app.js so new file and i don't know why why this is getting me i'm ts sorry ab.tx i'm gonna do console log testing that it works don't don't mind the typo i just want to show you guys something then here what we're going to do we are not really going to use the test but we can leave it there but what i'm going to do for now actually uh build app.js we're going to be using the def command so what we're going to do is um we're going to be using this package ts node dev so i'm going to do ts node slash dev and we're going to run the app.ps and that should be working so let's just test that we're going to go into the back end and mp and run so testing that it works so we see that this is working perfect but we should also see uh what is this not compound do i have to run a build let's see build tsc [Music] let me see aha there you go and then if we run the start it runs the same thing but it runs actually from our from our app.js so if we want to build we can just do uh npm run build but we're going to be running everything from typescript and development so that's what we're going to be doing okay so we have that so now let's go ahead and create our server um i'm trying to [Music] think what to do because essentially we want to create let's create a game um uh game model game route game controller and okay that should be it and then we will display that in react and we'll start with that we'll go with the most basic stuff and we'll add complications to it so let's do that so we want to create our server but in order to do this by the way and nowadays because there's a lot of testing and i want you guys to have a good um you don't have good habits good standards and whatnot we're gonna create actually i'm gonna go here so i'm gonna create a new file inside of my backend folder and i'm gonna call this index.ts so essentially what we're going to do is create an index file where the index is going to be run in our app file and that is necessary if you want to test your server uh we're not going to be doing testing in this in this uh tutorial series we may do like maybe towards the end but still this is good practice to do so we're going to import express [Music] from express and you see this this because we don't have the types installed so if you do command dot or control dot your um vs code is going to suggest to install the types so now i just installed the types uh we're going to go ahead and install course also right away because i don't want to forget about it same command dot or control dot and it's going to auto install the types for you i also want to right away configure the environment variable so dot emd slash config so let's have that done right away also very important i want to create my git ignore so i'm going to create that and i want to ignore the node modules and i want to ignore the env even though we don't have it created yet uh but we can go ahead and create it now dot env right board equals i don't know 8080 all right so we have that and we have that okay and by the way for now which i have this open i'm gonna go ahead and create uh git init so i'm gonna create my git repository and as you see these two are ignored which is perfect i believe i have more stuff ignored i think i had to build okay we want to ignore this we don't want to commit this because this will be in production only and yeah that's it okay cool so we'll we'll commit later on we don't need this for now i mean we don't need to make any commits now all right so we're going to do the following we're going to create our app constant which is going to be of type application which is going to come from express and we're going to set that equal to the express function very similar to to javascript not exactly the same but very similar now we're going to be using this in order to use json [Music] parsing and stringing fine so we need that which now it com it comes by default on the express library we don't need to use the body parser anymore here we put routes uh here we'll import here we will declare the route okay and then we'll export our app so right now we don't have anything really going on here but let's say that let's say that we create a test route so app dot let's say get we're gonna do slash you know just slash so we know that it works request and we need to use the tab request and response response we're going to do raz dots send message it works request response okay so we need to import both the request and let me see if i can just do request okay and response there you go now the errors are gone they should have been auto imported but oh well so now if we execute this is not gonna work because we're not telling we're not doing anything that says for our server to listen which is what we're going to do inside of our index file so let's go into our index file and i'm going to do the following so i'm going to do con support which it'll be either a string or it'll be on the finding case that there's an error process that amv port for this to work by the way we need to import our app from the app file and we're also going to be using mongoose from goose right because we want to install uh removing port you know yeah okay this thing that we're not using it but we will very soon so let's leave that as it is for now and we're going to create a function that is called start server that way it's very clean and we're gonna do the following we're going to we're going to use a try catch where we're going to try to connect mongoose.connect to our mongol mongol db url now we don't have this so let's go ahead and create our mongodb mongodb url connection which is mongodb local host and then the name of the tv which is i don't know i'm going to do yt for youtube underscore soccer so we're gonna have that mongoose why is this game in there oh there you go so now this is saying that this could be undefined but we're using a try catch so if it's undefined we'll you know we'll catch it here so we need to make make sure that there is there is something here whether it's undefined or not but this variable exists so once we have that sorry it should be here we're going to do console.log it to db and i'm just going to use a that's not what i wanted to put there you go that's the one oh and read it okay cool and then once that is done we're going to do app.listen so if we are connected to our database then go ahead and start our server which i'm going to say server running on port and we can use port that was like an extra parenthesis oh and i'm also missing a there you go that's the missing parenthesis in the case i would have an error we're gonna type hold on fail to connect to the to the db we're gonna put it across here there you go and then we're gonna log the air and that should be it and then we can go ahead and run our server now because we're running everything through here we gotta go ahead and change our our command here because we're not running everything from the app.ts file we're running everything from the app.index.file and we do this in such a way because this will allow us to test our backend later on if we decide to do so so i'm going to go ahead here and do mpn run def so it is connected it is working it there there seems to be no errors so i'm going to do local post 8080 and we have the message it works perfect so now we're going to go ahead and start creating our other stuff i'm going to close this close that close that actually i'll leave this open because we're going to have to stop here but in here i'm going to create a new folder which i'm going to call i'm gonna call routes another folder called models and another folder called controllers and i know i know that we could create both the route here as we see and the controller but the thing is that since we're going to be adding a lot of middlewares inside of the path it is better or i i think it's better to separate them that way it doesn't look as cluttered and you'll see how this can become cluttered like really really quick so let's go ahead and let's create the model so i'm going to create a new file and it's going to be called game.ts for this i'm going to create an interface and i'm going to call this game i'm gonna export this in case other other models uh use this interface so again just to make it very simple it's gonna have a title of type string it's going to have or not title uh let's let's start okay let's start with address then like let's start with number of people so we're gonna put that there we can also add i'm gonna add date separately from time i know we can do this on the same type of data but i feel it's a little bit um cumbersome so we can just separate it if we see that there's a trade-off or if there's an improvement by putting date time here then i'll i'll add it in that way but for now we'll do them separately so address number of people date time and well if it has a date and i have a it has a time and let's see field number field number that way there's if you look a game by daytime address and field number there's no way two games can be exactly the same so this will give a uniqueness to the game because you you can have a game at the same time in the same address right but it won't be on the same field number therefore this could be like the differentiator you know in addition to the idea of course but i i think this is good enough to start so we're gonna start adding the following so i'm gonna call this cons game schema which this will be a new schema which we have to bring from mongoose so let's do import schema from mongoose and i've done this way too many times so i know that we're also going to use a new model so i could pass the interface here it's not going to do much but it will help a little bit now here we need to just do the following time string now check how this is uppercased and this is not this because mongoose requires you to use uppercase when created this schema so that's fine an address definitely required we're also going to add a number of people type number also definitely required number of people uh it's not a solid time schema definition what oh i put string here instead of numbers so see how like it does do the interface does does check a little bit but it's not perfect so just so you guys are aware but it does help uh type i'm gonna put date which is also required true and field number which is of type number which is also required so now that now that we have that done um we are going to do the following which is model of type game or export default i forgot export let me check on my notes i don't want to be second guessing this so export default model game this is how it's going to appear on the database but with lowercase i believe and the collection is going to be pluralized i believe game schema so that way what we call this in the database will be in reference to this schema that we just create it all right so with that done we are going to move on to the controller and routes so in my controller let's go ahead and create the file so i'm going to call this game controller yes uh cons let's say let's do get all games which will have a request from express response and see how like i'm doing this arrow down because this is the one that i want if i press enter there i won't get anything um so yeah in case you want to like have those key shortcuts uh we're going to make this async also so be be aware of that so i'm going to say uh cons games is equal to wait games dot no sorry game dot fine because we want to find all and then we're going to do a try catch uh if we find it we're going to return rest.json.rest.status 200.json games otherwise return rest dot status 500 json error and we'll pass here and export i believe i have yeah we want to explore that export const we also want to create a create method so create game same thing async request response cons game to rate equals a weight and we're going to do the following game dot creates where we're gonna use the request dot body so whatever we pass in the body which we're gonna be using postman to test this so i'm just gonna open that for later then very similar to the ghetto games we're going to do the following which is uh return rest.status if it's successfully created we'll send it to a 1 and we'll send the game to create otherwise return rest.status [Music] 100 jason the message actually let's put s msg oh that's right message cannon okay so let's let's leave this too now we're gonna go ahead and create the routes so here i'm gonna put game.ts or you can put game route honestly it doesn't really matter but i guess this is easier to visualize game.route i mean game routes are so we're gonna do the following we're going to have to import import and i'm going to do this uh router from express and i'm going to create my router variable here and then we need to export it down here export d4 router and i believe again let me check my notes yep that looks fine okay so we're going to do the following we're going to do a [Music] router.get where we want to get api games so whenever we type that path in the browser we want to make sure that we can get all games where this is declared on the controller and also we want to be able to create new games uh let's type this let's create a game there you go which again just to recap is just this method and this method okay so now we have those two and okay i'm not running any anything so i'm gonna go here by the way i like to divide my terminal in two which if you have mac which is i terminal you can do command shift d and you can divide it by like so otherwise you can just like create a new tab but i like doing that uh because i i can see like the front end running and back and running or vice versa so i'm gonna do that i'm gonna go into my back end npm start i mean npm run it up sorry by the way you can leave this running um one quick thing uh before i forget so i want to have something very similar to nodemon that way whenever we make changes we don't have to be like you know closing reopening close closing reopening so we're going to do this first of all when we when we do restart we'll restart our server if we want but also we want to put a poll which this will pull the different changes um also another quick thing we can put all of this inside of our source um i've seen this happening more and more often that way it's cleaner you know you don't see like bunch of stuff here um like you just have two folders the build and the source and then obviously the node modules would stay here the emv the git ignore the package and the ts config would stay there but like the app the routes and everything would be inside of the source folder so let's do that quickly and vs code helps you do this change really easily but we don't have that much built yet so it's a good time to to do it right now so inside of the back end again i'm going to create a source and i'm going to put the controllers inside the source move update imports yes i also want to not the build the build will stay there the models will also go inside of source and make sure you drag it correctly right so now we have this two routes also inside of source so now i have this three uh build will stay node modules will stay dme will stay this too let's drag them inside of source that way when we close we don't have no files or anything related to the application this is just like configuration right dot emb get ignore package the json ts config and build and node modules nothing else nothing related to the app everything related to the app will be inside of this which is what we want so again and by the way if you see this actually i'm gonna uh close this let's see game controller okay that's fine that's fine and make sure you have the the inputs properly done uh vs code at least in mac does the updates for you but if not just make sure you have the updates properly set and just to make sure make uh run your server oh okay cannot find module so this is good um i forgot this this goes in source there you go let's try that again again okay working so we're gonna go to the browser i'm gonna type this test it's still working but also i'm gonna go ahead and do api dot games i believe this should be working oh of course this is not set up in the app so and by the way it there's nothing wrong with that that's because here we don't have anything declared we don't have no routes imported or no routes declared um regarding to the game so we're going to go here and we're going to declare well first import then declare so i'm going to import game route from routes game route okay cool then we're going to do the following we're going to do app dot use not get we're gonna make uh we're gonna use the use and i'm gonna put api slash games and i'm gonna make use of that game route constant that i created here and then i mean i'm going to clean this out or yeah i can get rid of that and by the way check how this like restarts on its own when when something has been modified with the new changes that we did with the paul so that's good now if we make a request of this we're going to see an empty array because we don't have anything yet or maybe i need to change the route game route yeah so because we're already using this in the app right so let me put this side by side we're already using this path so we don't need to repeat this here like this is going to be appended to this so we don't have to obviously have it like so we can just leave it like that same with this since we already have api games here we can just get rid of that and just leave it like that and as you see we don't see anything because there's no it's just an empty array we don't have any games so let's go ahead and create games and for this we're going to be using postman so on this actually for work so let me close this so let's create a new request which is going to be a post and it's going to be to http localhost 8080 slash api slash games slash game we're gonna go to the body draw jason and this will need to have the following things you'll need to have um whatever we declared on our model which is and i'm going to close everything now to declutter the what we have except for this so we need an address number of people so address whatever the address is number of people whatever that is date if i recall properly time if i report proper properly and then field number which is the number i believe and this is giving me errors because i need to put the commas here so actually this this works like vs go to but anyway so that's the proper format so address number people date time for number yep okay address i'm just gonna put you know 800 nine street um miami fail three three four seven i mean yeah whatever i don't know if that uh safe code exists people so there's going to be a 6v6 so the total number of people will be 12. daytime i'm going to put let's put 2022 of april april 25th time this would be at seven so that would be in 19 1900 and field number three okay so let's go ahead and test that cool so we have that we have the id we have the address number of people okay perfect so now let's test that this is working so i'm gonna make a request to that and there you go that's our first field so let's put three more fields so we can have a little bit more data that we can work with um should put name of the other place i should put name that's right okay let me see if i can do this change uh there may be some errors but let's try so i'm gonna have the string there i'm gonna put name type required true okay so in that sense this is working now let's see if i can add one with a name so i'm going to put software gauge um let's try this i don't know if i'm gonna get an error because i don't know if the schema was already saved on the database but let's try it okay so cool we could add it with a name included perfect so there's soccer cage and like the address is not correct but this this is an actual feel that i play at uh which later i actually want to use real fields so you guys can see like the functionality so back out to sport cathedral soccer i know it has no religious uh how do you say affiliation whatsoever it's funny though that's called cathedral soccer maybe soccer is a religion okay um so it's been 40 minutes okay so we have the back end well some on the back and done but now if i go here then i have let's make this a little bit smaller let's put raw data pretty print so here i have an array of the first field second third fourth okay cool so now we're gonna go ahead into the front end and we're gonna set up react redux and you know a couple of uh reducers and actions in order to get this uh in order to get the fields and create fields through react so let's go ahead and do that so i'm going to actually i'm going to hide the terminal i'm going to get rid of this and let's go to the app.this tsx so let's go ahead first and let's make sure that we can run our front end so i'm gonna do npm start and that was surprisingly quick that's good okay so there is our front end cool so we're gonna install a couple of packages also here we are going to be installing uh obviously redux but alongside redux we're going to install more so i'm going to open my terminal and i'm going to switch from the back into the front end so i'm going to do cd out so now i can see my front end i go to the front and let's install so first of all we're going to start redux js slash toolkit i'm also going to install react redux react react router dumb axios and let's let's let's install those for now so we don't have like too many installations in case we have a typo or whatever okay so we have those installations done i also want to install uh material ui so for this i actually want to go into the material you are where you are web page and here they tell you how to install it so here we're just going to copy that so i just installed literally what it says here because we're gonna be using that instead of bootstrap i also want to install react tools defy what else am i missing right or wrong this drama i don't want bootstrap i believe i install access already uh axios there have axios yeah all right so that should be it honestly so let's go ahead and let's create um everything that we need for our react so first of all i'm going to get rid of all of this and what i'm going to do is create a browser router component or more than create it import it put our routes here and then create one route which is going to have a path and then it's going to choose a component or element now um reg router library or the dev team chose to put this proper settlement rather than then component but it works in the same way um yeah there you go so now we don't have a we don't have anything we don't have a component here so we're going to do it like that and it's fine that we have it as an error don't worry but what we want to do is the following we want to create a we want to create a folder called features and by the way this is um the way i'm going to do the folder structure is the recommended one by the react redox team so i know it's a little bit different to other projects that i've done or other products that you guys have seen but this is the recommended folder structure so i'm just going to follow the standards i'm going to create my component library in case i have like uh isolated components that i need or helper components uh am i using api yeah i'm also gonna create a folder called api where you're gonna see [Music] how i'm going to be using this file i'm gonna call this agent.ts one that should be inside of a bit sorry so api and then this agent.ts will go inside there there you go that's that's the way i wanted it and then here it's going to give us an error to it we don't put anything so export test equals test it should not complain there you go and this is not it but for now so we don't get that unnecessary error because it will take a while till we get there uh render app okay so we have that i actually want to do also the following where i want to put a provider before i forget i'm going to put the app inside of the provider and i'm going to put store equals store which we don't have but that's fine so in order to have this store and have something first of all let's go ahead and create a new file inside the features and i'm going to call this um actually before that i'm going to create a folder inside of the features folder and i'm going to call this games now i hate this thing but vs code has it because of java and if you guys have done java then you know why if you haven't used java then it's not necessary to know why exactly but essentially i don't know vs code does that so i like to put two folders so i don't get like the one folder next to the other anyway in features later we will actually have account but this will stay as an empty folder for now inside of games though we will create a component so field page dot tsx and i'm going to create i'm going to create the following export default function not field game page what am i doing games page so i return div h2 game page okay so i'm gonna change this to games page that would make sense okay and then no i'm in the app test okay so that's what we have to do but in in the in the index.tsx not here sorry that was my mistake uh this is fine we can move this as it is this is where i wanted to put the provider so i'm gonna do the following provider sorry i just didn't i didn't realize i was in the app.test text test tsx sorry uh we want to put this here inside of the index.tsx so we want that which again we still don't have the store but we're going to create it just now so we have the features all right let's try to clear this thing a little bit and then inside of the source we're going to create the store which is where we're going to be having all our state being handled well stored more like rather than handle because we're going to handle everything within the features by using slices and you'll see how so i'm going to create a new file and i'm going to i'm gonna call this store.ts so we're gonna do the following and we don't have any reducers yet so don't worry again we're gonna have just a little bit of errors but don't worry we'll fix that right away so export.com store equals configure store which is going to come from redux js slash toolkit so here we're going to be combining our reducers right and our first state or is going to be coming from the games reducer so game reducer which we don't have yet but again do not worry and we need to create this we're going to create for well we're going to create two types and two variables but these are really really important so we're going to create a root state with our return type of store get state um we're going to need this in order to be able to import the state but also um the second one we're going to need it in order to dispatch well not messages but dispatch methods that we need to do and change in our state so store dispatch so that's why we need this too you know that one is to get state one is to dispatch actions and you'll see how this will work um it actually works really nicely and also this is um actually being encouraged by the dev team of redux so i'm also abiding by the standards that they have so in case that you see this a little bit weird i'm just following the documentation dispatch and this is coming from changement to add do i have a okay i had a misspelling somehow use a dispatch okay well we'll see if i have something selected type use use select select your hook state you select there okay so that one's fine this one i have an error let's see expert cons use app dispatch it's our ad dispatch type of store dispatch that looks fine oh this is the one that doesn't i don't know why but probably the suggestion used this patch conrad redux okay that's right now this is the only one that we don't have don't worry about this we'll get that done right now uh to get rid of this error we can now use the games page then there goes away so that's done uh we'll leave that as it is so that's fine uh store now we have a store even though it's not fully completed but now this is fine so we're getting rid of errors little by little so we leave this open and we're going to go into the features where we have our multiple features we're going to go into the games feature and we're going to create a slice so game slice and this is going to be ts not tsx actually i'm not sure if i have to pluralize or not and those little things are important so users user detail user slides i guess as long as i don't pluralize the slices fine i'll leave it like that i think it's fine so let's go and create our slice so we're gonna do the following first of all a slice has to have an interface of the state of the slice so we're gonna call this game state where the you know just like the game i'm gonna open here a the the game model from our backend that way we can use it as reference right so the game state will have a name whether it's a string or it could be no right uh actually what am i doing uh this life sorry let's recap because this is not gonna be bringing a single game this what we're trying to do with our slice we can either bring a single game which we don't have that method we'll have we'll have it later we can have multiple games right as we have here uh local host like games right so here we have multiple games so that's also something that we need so for example we can have a single game here single game that could be as part of the state we can have multiple games right games where we would have an array of of game but again this interface doesn't exist yet and we're not going to be using it from the back end of course because they shouldn't be contacting each other so what we're going to do also we're going to close this to leave this as clean as possible i'm going to clean this too because that's not doing anything i'm actually going to leave it as so let's close this okay so we're going to create a new folder called interfaces and inside of our interfaces and this is for organization i know it's a lot of folders but trust me the game i mean the more organized the better so and this has to be game because it's single so export interface game now we're going to be using as reference to back in if we want so again make sure we're clicking the the one that is in the backend models so we can say okay it's going to be of type string and we can copy paste sure but i like typing to get that muscle memory going on number [Music] of people which is the type number date date time string and field number number and again we should not use that this in the back end in the front end because we can change the front end we can decide one day like hey or hey we're going to be using view now or we're going to change the back end like hey i want to use golang or i want to use java or i want to use c sharp so this won't work anymore it would change back-end so that's why we have to create a separate interface in the front end that is not communicating whatsoever in the from the backend right or these two folders could be in some totally separate folders so it's just not ideal to you know i know you can say like oh but we're repeating code sure but this is in another project completely different remember that even though we will be connecting these two folders um they should not be connected whatsoever because of the same reason right we want to be able to be as flexible as possible in case that if we want to change the back end and change the back end in the future uh the front end is not dependent on the backhand so just a you know quick note uh to be aware of so now this is good because now we can use games you know if we're going to have multiple games that would be of type games array i mean game array or it can be null right because you know maybe there's no games or maybe we don't want to load any games in like initially so we're going to leave it like that we can have also a loading uh state right by the way this right here this interface is not for the for the games themselves right we're not trying to model stage for the games or we're not trying to create an interface for the games themselves we're trying to create an interface for the for the everything that involves the game so we want to make sure that can we put a loader whenever we're talking about games or whatever whenever we're doing development or features for the games we want to be able to get a single game right so single game which will be of type game or no and we're going to be able to know whether a process is loading or not which is going to be of type volume so that is our whole game feature state right it's not in regards to the game object in itself or games but it's in regards to the to it's in regard to the game's feature not not the game object or the games the game feature okay so i want you guys to have that in mind because i remember when i started with redux online but how is this in relate to the games like well it's not really this is modeling the the games feature not not the game object itself this is in like this is modeling the interface for the game object so and you'll see how this will plane it's actually really easy with redux talking which is why i wanted to do a tutorial of this i think uh redux uh toolkit didn't the dev team did an amazing job because for me it's way easier to comprehend compared to like old redux so now that we have an interface we have to declare an initial state right so how is this going to look initially will we have name games initially will they be null initially which they will how is this going to work you know upon initiating the application so we're going to call this initial state which is going to have an interface of the game state now we're going to say that our games are going to be null initially or not no but it's going to be an empty uh an empty rate um the single game which we don't even have the method but that will be that would be no for the time being and we're going to have a what else loading so we're not going to have anything loading yet uh because initially we're not loading stuff when we create when we make an api request through react then we will change the state but for now nothing is done yet when we do the oh get games request then okay change loading to true and then once we have all the responses change loading back to false why is that important because that is what it's going to be controlling the the spinning loaders in the react app so that's why we have this state but anyway that's that's like the the initial part let's create a we're going to create an action and we're going to create a reducer so quick note on react redux and i know this is long i know that this has been an hour but we're trying to you know get something going on so actions actions are processes that get data from back end and reducers reduce to a specific state or you can say that it manipulates state changes state changes state now you guys have no idea but like not so long ago those things were separating different folders then you had like reducer tabs you had action types and then you had your actions and then your reducers that's like four folders already with multiple stuff that you have to set up you're doing everything one single file instead in instant four folders with multiple files each so this is a lot nicer compared to uh old read ups which is why i like a lot uh redux toolkit so let's start with something simple let's start with like the get get games so i'm gonna do export on scan games equals to create a sync thumb so this in order to make a sync request that's what funk it's used for uh and i'm gonna get um this is what type of um of of information i'm expecting which is an array of of games and then any is in case i want to pass data but i believe actually i believe i can do this so we don't we're not passing any data so therefore we don't we don't need a a second description so this asyncthem so this method that is allowing redux to work as synchronously is going to expect to receive an array of games that's it so we're going to say games right so because that's the feature that we're working on and then we're working with specific the get games method where this is going to be async where we're just expecting uh games we're not passing any data so we're gonna do and when we do vaccination then we may pass some data so we may need to update this in the future but for now we're gonna do the following const response equals a weight i'm gonna do axios dot get http local full stadi api slash games and that's about it and then we're going to return response.data and you see how there is one away then we're going to do return func api dot reject with value air for now we'll do more stuff on the back to get this going in a smoother way but this reaction so with this action we're going to get all the games now we need the reducer so what are we going to do with the data that we just got we need to change it and put it in the state which is why we need our reducer created right because right now we have the data but we're not doing anything with it we need to manipulate it so we're gonna call this a slice which is a way of creating reducers so game slice equals create slice i'm gonna do name the name of the slides it's gonna be games because this in relation to the games we're going to make a reference to the national state which we already created then we're going to create our property reducers instead of the slice and we're going to create a say it set tokens uh said games [Applause] uh method where we get the state which is all the games and uh the action where i don't believe we need an action i think we we only need the state action action the type of state no we do need action so because within the action right so this is our action in this action we're gonna get some data which sometimes it's called payload so we're gonna set the state equals to this action data or action payload so payload action where what's what's the type of the payload or what's the type of the data well it's an array of games right we're trying to get we're trying to get this right here which is an array it would put data right this an array and this of type game so we're trying to get this array of games in our react application so we have that there don't worry about the errors right now i'm gonna do state dot games equals action dot payload okay import state okay that's fine and then why am i having an error here [Music] state state state looks fine to me i don't know why state that years um let's see give me one second okay so what i did and by the way so i'm gonna this is the error that i had i did update import that's the only thing that i was missing and then the air went away so that's it so now that i have that i'm going to [Music] do the following [Music] i want to add i don't i'm not sure if i want to add extra reducers but okay let's let's do the following uh i'm trying to think what would be the easiest thing all right so i'm going to also add extra reducers so in the extra reducers what i want to do is model the process of what's going to happen like the lifetime of of getting a token right because first we have like oh attempt to get a token right i mean token what am i talking about i'm looking at my notes an attempt to get games like all the games so first we attempt to get the games meanwhile we're getting the games we're gonna be loading right because that will take time maybe not a lot maybe two seconds but we're getting them we're in the process of and then there's two outcomes whether we get them successfully or we don't but that life cycle is three uh different um life cycles so to speak the wording process the we got them successfully or we did not get them successfully so that's what the extra reducers are going to be for which is something that in all all redux people did in a little bit different way but again this features that redux stalk toolkit allows you to uh set up in order to save yourself a lot of boilerplate and this is really really nice you guys have no idea if you haven't seen normal redux this is so much nicer um so we're gonna do the following i just don't like that unloaded initial state against yeah all right yeah those are different so i'm gonna do i'm just debating on how to like model this or we can add just two cases if not but so we're gonna define builder add case so we're gonna just be getting the token so get tokens i mean get games jesus so if we have the get games the state is not well yeah we're changing state so state and fulfilled colored argument supply [Music] all right so i think it's pending there you that's what that was looking for so we're gonna have state and we're gonna have action i believe we don't even have we don't even need action because we're not getting it and we're not getting anything from this yet if it's pending right we will only get something whether this is fulfilled or rejected but for now if if the process is pending we're not getting anything from this uh action we're not getting the arrays we're pending uh so let me check something quickly uh depending yeah we don't need state so we i don't even need this underscore so what what are we going to do with that we want to change in this state right which is our games and uh not games uh loading we want to set this loading to true right so again this is our state and we only want to change the loading so initially it's false right because if we don't call anything there's nothing loading but whenever we hit this uh whenever whenever we hit this method or action get games then we say okay if it's pending put this load into true then if the get games method was successfully called so we're gonna put uh i think it's for build yeah fulfilled where we're gonna have state and action payload hence the action um then if it's fulfilled then we're gonna say like okay change the games equals to the action.payload but also change the loading equal to false because the process is done and same with um with games get games rejected if if the action was not successful kind of like a promise right we're just gonna say okay change the state loading equals to false and we don't have to do anything to the games because we didn't get any uh probably we have errors which actually i can add it to the state so i'm gonna put here errors um so i have no idea what type of errors will be yet later we're actually going to do something to make the errors appear um as something that we pretty fine but for now i'm just going to put it as an m2 right like yeah i'm not sure what canada pure ass so i'm just going to put in a small actually and then here i can put state dot errors equals to action dot payload right why is this so because here we say if we have an error then return the error which this could be i'm not sure what it can be yet but we're going to leave it like that so we're done with the slice this is all that we can do now with this actually we can also add the create but this is already an hour and actually you know what let's let's let's do the create so const create game equals create async game now we're going to be passing data which is going to be of type object we're going to be passing this will be the in the feature games for the method be create game and then of course this is synchronous where here we'll have the data and if anything if needed where you will use the thunk api which is just a reference from thunk in order to do dispatching uh methods so now we're going to do const response equals axis.post http localhost 8080 api games game and we're going to be passing the data here then we'll just return response that data uh [Music] i might get an responsive data it's not exist on okay so it's telling me that probably this is not i believe that maybe this was the other one around i always forget let me check quickly in my notes they token creator object yeah i think api responsive data data that's what i was missing and yeah so this is in reference to the data so we're saying um we're expecting to pass this type of of data in this create game method and we're expecting to get this type of data which is the you know the gain which would be the responsive data that's that's essentially what this is saying and you know we'll do the call to the api and then we'll get a response that data otherwise we just um dispatch a message that we're gonna error and that's it so now we have that and we also want to create the so that's the thing if we are creating this we could change the state create token dispatch we could either set token here um no actually maybe this is not the correct way but i'm gonna do it regardless right now where i'm just going to do thunk api dot dispatch and i'm going to do get games so this will just get all the games and it'll it'll retrieve them from the database it's not ideal what we should ideally do is just add it on the front end and that should stay and uh later on when we do a call we'll get it but right now since i'm running out of time i don't have time to check this but for now let's leave it like that because i know that this will work so now we have all this i i know i spend a lot here in the slides but hopefully you guys have a lot of you know a lot of clarity of how the slices work i know we're still missing to put them in the in the store but we're going to do that now so we're going to get set games which equals to game slice actions what am i doing so i know that this is weird because i know i said that actions were one thing and [Music] reducers were other things so i know it's weird uh i'm actually making reference to set games here said games and games and uh you know these are the reducers and these are my actions and you see but you're saying that this equals to game slice that actions set games know it's a really weird way to uh you know reason about but let's see if uh let's see the redux toolkit redux toolkit export actions from slice just so you guys can see so and you see how like reducers increment increment this is coming from here so i'm abiding completely by the documentation okay so don't add me this is from redux toolkit so i'm going i'm doing exactly the same as redux toolkit okay but again this is obviously a reducer because it's coming from here but you're like destruction it from the game slice actions uh i know it's a weird thing to to reason about but let's let's leave it as it is and let's uh you know let's all agree that these are these are actions because these are the actions that get the data and these are the reducers that reduce or change the state or modify the state uh so now we can go into the store and then this game reducer now we can import it so import game reducer from features slash games slash game stance and some people like to leave it as slice but i'd like to leave it as reducer it's essentially the same so i want to display at least the games and we're not going to have time to make the creation because it's an hour and 20 minutes long already but at least you have like a good setup of how redux toolkit and and node in stack oh god noting typescript works oh wow okay so i'm gonna collapse collapse all this so it's a a little bit cleaner let's go here and what i'm going to do is the following i won this that upon initiation it calls the get games function now this needs a couple of things before it works a hundred percent um okay so i did the following okay so first of all because this will be in a synchronous um you know the gate games is asynchronous right because we don't know how much it will take we want two things we want to create a function called init application or you need app which we're going to use a callback hook from react right which will be of type a sync function map equals let's actually make it a yeah yeah use callback async okay so we're going to use a 08 dispatch which also does dispatch we don't have it yet and that's what we that's why we created those things in the in the store we're going to be using this use app dispatch which will help us dispatch actions and methods so i'm going to say this batch set equal to use app dispatch so await this batch and then we're gonna do get games and i'm getting an error i don't know oh this will be dependent on the dispatch constant meaning fire this whenever we dispatch the message right because this hook will work only depending on this change of state so now what we can do is that upon initiation of this application we want to initialize the application which will get the games uh what else am i missing here i think that's it so now we have all this setup so now we can go into our games page and then i'm gonna do the following i'm gonna do cons and i'm gonna get the games which will be coming from and again now this is why we use the use app selector because that's where we get our global state from use app selector but this is a little bit different we're going to do states where we want to pass the state.games and we and from here we can use loading and whatnot but we're gonna we're gonna see later on how to put different state like account state or player state and whatnot and we cannot get all of it from here we would have to use multiple app selectors where this would come from i don't know accounts and then the other one would come from players but don't worry about this um for now so now we have the game so you know that's normal we would do a ul and then we would do if the games are not null then we can do games dot map we're going to map a single game where we're going to pass an li and this will have a key of game dot underscore id id does not exist on top game okay by the way to make this uh error go away we're gonna go into our interfaces and we're gonna put this underscore id and we're not always going to be using id so that's why we're going to use the question mark so now the arrow went away and then we can do let's say an h4 game dot and let's say the name of the game like where the field is and this is not displaying let's test this okay let's see any errors okay so we do have a lot of errors uh nonce lines what detected payload http redux cross origin oh okay so probably i don't have the core set up not something that i actually mentioned to have it but yep i don't have it app use course so this is in the app.ts in the back end and let's put your mail where's and let's restart our backend with rs okay hey there you go now i remember this dot it does not have a game because this one does not have a game but i can put addresses instead of names so let's let's go here and i'm gonna put dot address all right so lastly i want to make this a little bit nicer um because you know i know that visually good looking web apps make a lot of difference so let's add a nav bar and let's add cards to this and we'll be done with the with the tutorial and i'll try to be as quick as possible so i'm gonna go to material ui and i'm gonna go for the app bar there was an app bar in particular that i liked actually i'm gonna use my notes instead that's a lot so let's use yeah my notes i have a 200 line so for a knife bar so let's use something simple and again this isn't either like as simple as it can be but [Music] all right let's use this nav bar i guess so i'm going to go into my components new file navbar.tsx and what the hell why was this not copy code okay so we have our nav bar and this gives me an error because i don't have that installed npm i [Music] i mue slash my material let's see the error goes away with that i think that's it there you go yeah that was it and then the other error responsive export default now is going to be nav bar okay so that's it i know it's a lot of code i know we'll clean this up but for now what we can do is go into our [Music] where's our app.tx here and here i can just put the navbar and you can call it whatever you want i just like calling it that in order to avoid um naming issues issues what i thought i had it imported maybe i have to restart the server and let me see if i have to install something else i mean i already did so yeah it was just a restart so what does this do as you see whenever you make this smaller you know you have that you have this and then you have that which looks really nice but right now this is not useful we'll make this useful in a bit for now at least we have something going so now let's go ahead and fix this too because this doesn't look as nice and also i want to make i want to change a couple of things here where's my app bar so instead of doing style like so um you can do the same where you do style like so i'm gonna do background image linear gradient i'm going to put 90 degrees and i'm going to put blue then i'm going to put blue or actually greek okay that doesn't do anything okay let's try one more thing and then if not i'll i'll give that a rest background image linear gradient 90 degrees i'm going to choose blue and blue i'm gonna choose different blues so i'm gonna choose like i don't know something like this and then this one i'm gonna go like for a green i don't know then let's use this class in the not bar names equal to nashville hey there you go there we have our our gradient and we can change this if we want so and this did not work at all we can use it for other things but for that as we have it is fine i don't know i think it looks decent it's not it's not like the best um how do you say design that i've done but it looks okay i guess so i'll expose everything and then the last thing that i'm going to do here is the following i'm going to change this to grid because that's what it comes from uh material ui container so let's bring this from material uh why is this not working i wanted to i want to add like some some sort of margin so okay 133 we're still kinda within the okay limit i guess go here container oh okay so it's container not grid okay container we're still going to use a grid so that's fine then we can get rid of this all right perfect i'm going to close this one so now you see that this is not um you know all the way to the to the left so it has a little bit more margin which is it's fine it's not perfect but you know so now i want to change this also i want to add a card for this instead of the allies so i'm going to get rid of that i can create i'm going to create a grid where this grid is going to have uh i'm not sure let's leave that as so let's put that there and i'll explain what i'm doing great by the way it's kind of like the columns and rows of bootstrap they work a little bit different but they're somewhat similar so i want to use this card right here but we don't have an image so i guess this is the cleanest or we can put something like that so copy the source code i actually want to see the source code this is too much too much stuff sorry um actually you know what let's see what changes with this okay that nothing was done there container there you go so now we have the four so i'm actually gonna do a little bit of styling here myself like so with the sx so remember like style of anything like style whatever then i'm gonna do background image and let's see if this works good last time it didn't work linear gradient 90 degrees green and then i'm gonna put blue oh okay so now it did work okay interesting which is not the color that i want by the way but so now i want this in every single grid not not in there and i'm missing this that's why it's giving me an error okay so i'm actually going to put this that way i can put a lot of styling here okay so not not really thrilled of how it looks but let's add some spacing okay that didn't do anything again didn't do anything uh where i was using the grid give me one second guys and we'll be done soon am i missing the item property here nope grid container okay i don't like how it looks especially that thing going okay see if i can give this a little bit of margin so let's say margin 10. margin height 50 with 50. okay whatever that's okay i'm trying to make this look decent but i'm struggling here order radius okay so it's just i have a problem with the fact that um if i want three elements per row right which is the same as column four in bootstrap i'm only having two elements which is not something that i was looking for also where's the app css.css i'm going to copy this rgb for now we'll obviously we'll make it a little bit more useful right now i know that there's not really value to like doing this and there's just styling but you know i like good styling okay uh where ish kind of get in there um we can add cards but yeah later on we can do that you know we can add one more which will be let's say soccer cage rooftop so now we should have okay so we change this to names actually i'm going to change this to names okay so we have that again i need to work in the styling but i'm going to stop here um that way at least you have like something to look for it looks a little bit nicer uh we have this you know getting pulled from the back end react and redux is working i'm going to leave it here obviously i'm going to make it nicer and make it more useful where we'll have like a great form i'm going to add authentication i'm gonna add like validation in the front and in the back uh obviously log in sign up and whatnot but at least i wanted you guys to have something that looks decently well and that it's set up with redox is set up with node in typescript and you guys can like if you want to take from here so if you like this video please like share and subscribe and i'll see you guys in the next tutorial [Music] [Music] [Music] you

Channel: Arturo Filio Villa

Views: 12,163

Keywords: typescript, redux, redux toolkit, react, reaxt redux, node, mern, fullstack, computer science, programming, javascript, web development, software engineer, material ui, mongodb

Id: 02qV2icZahk

Length: 104min 13sec (6253 seconds)

Published: Sat Apr 23 2022