Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

hi everyone in this video we're going to learn to be a repro react developers and we're going to use all the professional reacts libraries and technologies in one single project and set it up all together so in this video tutorial i'm going to be using redox redox toolkit i'm gonna use apollo and apollo graphql with react all in advanced way to just take your skills up one level and if you're like just like a little bit more than a beginner so you know the basics but you still want to be like what an advanced developer would like to do or how big projects are set up or if you're looking for something like complicated and something like a project structure to put your hands on for creating like your next startup or your next big project to release it online or whatever like that well you are actually in the right place in this one we're going to be having like more intermediate into advanced stuff i'm going to combine it all together to create the best way to develop a react application with different technologies so this is actually the actual application we're going to create at the end it's going to be more like a project a simple project just demonstrate that everything how it could be working together from redux store redux toolkits and typescript graphql style components all of them how it works together and this is going to be created like a hot anime list all like listed from from this cool website that provides us with a graphical api so we're gonna go through all this and also as i said we're gonna be using redox toolkit which is the new batteries included toolset for efficient redox development and uh yeah this this one i can tell you my personal use this one is definitely better than the regular standard react readout and it's it's actually from the same team but they did that and and it's much more powerful and has a lot more features into it so that's what we're going to be they're learning going to be learning redux toolkit from scratch i'm going to also be learning graphql but you still need a little bit of like beginner basic knowledge of what is redox and what is redux store and like for example what is graphql and how graphql works just the basic ways to know that and that's that's all you need just like that so i'm not going to say this is an absolute beginner who doesn't know what is redux or his graphql or what is react or what is typescript you still need a little bit of knowledge of just like a teeny tiny pieces of all of these technologies together to get started with this tutorial and to be able to follow up correctly without any issues or problems so that's going to be doing in here going to be using all of these awesome technologies we're going to set up a full project that has everything from scratch and the projects you know it's going to be pretty big this is the full project structure from interfaces graphql schemas typescript with redux stores selectors and many many stuff you're going to be learning throughout this video so hope you guys enjoyed it and without further ado let's go ahead and get started [Music] so let's go ahead and get started and we can get started by setting up the projects so what i said before is actually we're going to create a full advanced react project i'm going to just like include the batteries for making it an advanced and like a production ready project i'm not going to go like for something simple i'm going to use all the technologies that are me needed pretty much to make or integrate with react in order to create this big advanced project for our professionals so we're going to be using redux toolkit in that particular case and also we're going to be learning what is redox toolkit and how we can use it we are also going to be using apollo graphql if you're not familiar with that you should already be familiar with a little bit of graphql like at least what is graphql and how it does work and what is kind of this type of schemas and scalar types just a basic beginner stuff in order to be able to follow up because i'm not going to go through all the beginners either for apollo or graphql or even for like the redox you should already be familiar a little bit with redox so like what is redux what is redux store how does stage management redux can provide and those kind of like beginner stuff friendly then later on what we can do we can go and like grab redux toolkit we can start working on it and we can just like explain everything that redux toolkit provides versus the regular reacts redux or the standard version of redux we usually use with reacts and what is actually the kind of differences and why you should choose redox toolkits versus like the regular standard redox installation so this is basically what i'm going to go through in here and let's go ahead um basically for for this one i'm going to just go ahead and use a template so a template in here is actually provided on github which is called cri template redox typescript which is just a create react up template and since like the latest version of cra or query up top it now provides custom third-party templates to be able to install the scaffold throughout this project so i'm going to be using this one and if we go to get started in here go to the installation you can clearly see that this template or this docs in here it provides us it tells us if you want to use like redox alone with javascript you can use query react up and my app and you can do the template redox otherwise if you want to use typescript which is in our case we're going to be using typescript as well so what you can do is going to use template redux typescript and this template in here is going to have everything installed for us correctly and all the redox toolkit etc for us correctly it's not a big deal if you already got a project that is an existing application all you have to do is just npm install or yarn and redux js then four slash toolkits then that's pretty much it then you can do the normal configuration of your rear dock store and all the kind of simple stuff in here i'm not gonna go through this one i'm gonna use this cri in here as use template to get stuff working and get started with the scaffold projects for us from scratch so we can get started install and configure the rest of stuff so let's go ahead and open up the terminal i believe you already all guys have a german here easy linux more specifically ubuntu latest version in here and what i can do is quickly go ahead and use cra to get stuff running so i can go and copy that i don't want to just like be a geeky a lot so i'm gonna copy all of that yeah i don't wanna i don't wanna get started real quick with this so i'm gonna rename my app i'm gonna name it react pro project click enter and it's gonna mpx is gonna do the job for us it's gonna grab ria create react up for us and it's going to start and install all of those using yarn so all we have to do just sit back and wait so that was quick now it's done everything is installed and we got a ready project for us to go ahead and work on so let's go ahead and cd into react pro project the project we just created i'm going to open up the code or the vs code code editor so i'm just going to grab this one in here i'm just going to make that one a little bit bigger and yeah done so close everything we got node modules installed everything and if you take a look on it it's just like something pretty much the normal create reacts up folder structure with the public and src logos objects and all of that the only difference in here right now we are actually using typescript and if you're familiar with my projects like my application it creates all throughout my channel and you watch a lot of my videos you know me i love creative top i just do it every single time i want to create a react application or scaffold a project real quickly so you got a point you should be already familiar with how we do that and why it is very important to do it that way now we've got our projects in here everything we need let's go ahead and open up the terminal real quick and for this project it already does have some example to get started with take a look on the feature in here already has some like a pretty basic example how to how to pretty much use redox toolkit and how to use the api how to use slice and all that i'm not going to be needing this i'm going to completely get rid of it delete i'm going to go to uh jsx i'm also going to delete all of those and i'm going to read off all of those as well so just go here get rid of them replace them with a hello world pretty beautiful hello world and take a look one more time um yeah hopefully everything is done if we up folder in here you're gonna find a store which is basically our redox store i'm going to find the hooks which is basically just normal react hooks but this one or this time is going to be a little bit different because it's going to provide it with types that way we are actually importing them here we use dispatch with opponent from reacts predox but we are re-importing them like we're going to re-export it then we can re-import it from our like files we want to work with to be able to actually use the interfaces and the power of typescript so that's basically what we're doing here i'm going to go back into this later on to explain what is going on i'm just going to get rid of this we don't have a reducer anymore get rid of that and everything should be right into the place so everything right now is good we've got the stores turned up we got everything let's go ahead and actually install graphql then we can go ahead and back and talk about redox toolkit so for installing graphql all we simply need to do is just go ahead install the graphql and the apollo graphql so i'm gonna go um yeah i'm gonna go to yarn add so i'm gonna go apollo forward slash graphql then i'm gonna go normally to i want to make sure that i'm not wrong because i don't really like memorizing all those i'm going to go to here get started and it's apollo clients instead of apollo graphql i don't know why i did that there but yeah so it's a polar coins then graphql and we install those and those basically all the needed packages for us so don't add let's go ahead and add those and wait a little bit for those to finish now it has been successfully installed let's go ahead and see on the pack.json so we're going to see all the dependencies installed in here we've got apollo clients redox js toolkits testing libraries a couple of types in here we're going to be needing react react dom and the actual reactor dom graphql and the typescript version which is basically the latest available timescale version in here installed in our projects um yeah so pretty cool let's go ahead and actually this is optional it actually depends on what you want to work with and it's more like you know different kind of personal opinions and and choices so i actually you know me i love using style components so i'm going to go ahead and install style components in here to get started and work with the css style so let's go ahead and add this i'm going to clear out this i'm going to do yarn add start components and since we are actually on typescript we're going to have or we're going to pretty much need a type in like the typing files for this style components to typescript recognize what the type style component has and just to provide the interlicense and you know code checking and all of that kind of features typescript does provide so we're going to install style components i'm going to do an end just a basic unix thing and do yarn add again but this time this is going to be development dependency only because you're not going to be needing types for dependencies ls those there's actually needed but the other hand we could just also need times for stock components only as dev dependencies so i'm going to do our types style components and that should be it so let's go ahead and install those and should be real real quick to get us up and running and it's done now we got some components and the types are actually installed right now and everything is actually good to go so let's go ahead and just close that clear the console and we can get back and we already already pretty much got a basic projects going on in here uh we got a basic graphql apollo installed and we got redux 2k plus react installs so everything we would like need to get started is actually installed now it's actually configuration time and the stuff that needs configuration is actually apollo graphql because on the other hand for like redux okay we already got it configured in here like the store just just a basic configuration just does a configure store basically this one redox js is actually having batteries included which means it already has the kind of a configuration inside of this package and it just like export us with a couple functions to use and to manipulate those so it has everything underneath here it does everything behind the scenes for us and all we have to do is just go ahead and grab the data or grab the functions that needs to do this uh pretty much you know the preparation and you can use them to create a store and prepare all the kind of stuff in here so this coffee gear store is basically a normal configure store for a redux and you need to pass it a couple of reducers and that's that's basically where it is and here we're actually importing or pretty much exporting some custom types for typescript to be able to work with so for the up dispatch we are just like exporting store.dispatch we're making these a type available so whenever we need it we can just go ahead and import the app.dispatch and pretty much we are good to go if you need like the root states the type of the root state to use in terms script you can grab it right this way and the redux or up thunk in here which is basically not going to be needed throughout this video but it's still um yeah you got it right here so yeah pretty good everything is good in here let's go ahead and set up graphql real real quick now for graphql we all know that graphql is actually depending on a schema and this schema should be generated like it should be grabbed to the client like downloaded from a server to the client and the server is actually the end point that you want to point into to grab the schema so for example let's say you want to select points into this anime kind of like website or graphql api so this anime graphql api has already this schema otherwise graphql won't be able to work so it has this schema somewhere on the server what we need to do is actually tell apollo graphql to go ahead and download the schema for us it should be downloaded here into the clients now after it gets downloaded apollo and graphql should know the exact schema to get started working with and we should be able to know like what is the types and what are the dna the scalar types the mutations the queries and everything that we can get started and work with in order to be able to query the api so that's that's the basic part of graphql and providing a schema obviously if you're actually going to do it with your own graphql server so if after doing the graphql server setup on the server itself using node.js apollo server whatever it wants after you're doing that you already got a schema somewhere in there then you have to just like set up the client using the apollo cli to tell it that this is the apollo or this is the graphql endpoint of my server go ahead and grab me and download this schema for me so i can get started work on the front end as well with the same shared graphql schema so that's going to be doing right here and in fact i'm going to go in and create a custom script that is going to automatically use the apollo graphql cli to go ahead and download me the schema and grab it right real quick so let's go ahead and do that real quick in here i'm going to just go ahead and do like a schema download i'm gonna add the new script i'm gonna name it schema then colon then download and mainly using this column then whatever verb just to separate the concerns like schema is just like a specific context then download a specific concept so for example you can have schema and you have like for example schema download then another script schema fetch and yada yada this should be really really you know useful for you to create a bunch of scripts and to keep you know states of them and manage them and and all that kind of stuff now for this one i'm going to be using the apollo cli to make sure we do that so how we can go ahead and grab the apollo cli so let's go ahead and install it globally you can use mpx to just like run it whenever you want but i would rather install it globally because nbx sometimes does quite some time or it takes a little bit of time to grab the schema and all that kind of stuff and if you've got like internet outage or any interruption throughout the internet well you got a problem you can't download schema but depends on the scenario you want to work with you can use mpx so for me i'm not going to be like deploying all of that or all kinds of stuff i'm just going to use for development only i'm going to use an mpx and mpx does work a lot better for me so i'm going to do mpx apollo and this is the apollo cli and all you have to do is just go like service and download then this this particular command is going to like download a schema for us then we have to provide it with an end point and for the end point i mean the actual server endpoint like the graphql server endpoint and not only the server name like not only the domain name for example like google.com now the full endpoints to your graphql for example google.com then forward slash then graphql or you forgot like a subdomain hosting that graphical api it's going to be something like graphql.google.com you got a point so that's what i mean and that's what i want to point it to so the server api in here and for our case we're going to be using this anime kind of like tracking website i said before and this one likely provides us with a graphql api so all we have to do is graph eql and it uses the graphql or the graphyql pretty much um ui in here and and it looks pretty great and you can just go ahead and test throughout this one directly on the site and test some queries you can even take a look on you know what are what type of queries are available the dll types the scalar types what are the queries available all the kind of stuff in here so that's what i'm going to be pointing into i'm going to go back i'm going to point this endpoint into this and last but not least we have to give it like the last argument which is the output or the destination folder we're going to output the generator schema so i want it to go to src then up then i'm going to create another folder called graphql and basically inside of that i'm going to name this schema i'm going to name this graphql schema json and by the way this is a json schema make sure to add the json extension at the end otherwise it will just be crappy and it won't work for you so that's it that's basically all we have to do just go ahead and use the schema and the reason i chose the script in here because this one is going to help you a lot you don't want to just go and grasp every single time you want to update the schema you go and run this really long ugly command every single time just like run the script you got it right okay so yeah as i'm pointing here every single time the schema changes on the server it has to be downloading or you have to update your schema locally on the client otherwise it won't work for you as intended so let's go ahead and grab this real quick i'm going to use vr i'm going to do schema and colon then download and this one's going to run mpx it might take a couple of seconds to fetch the actual apollo cli for us then downloads the schema and then just going to place it in stuff like up and gonna go create a folder for us called graphql and we can are good to go and my bad actually this is should shouldn't be actually graphic ul it should instead be just only graphql because the graphic ul is actually this ui that you see but the actual endpoint for the graphql api is actually forward slash graphql not graph eql so just a quick mistake in here and that's why it gave me an error 404 not found just like saving that rewriting the command it should work and it should generate for you a schema so make sure to spell it right and to get the actual endpoint uh url right otherwise it will just give you under the errors and 404s and there you go the schema is downloaded and ready to use for us if you take a look up graphql we got graphql dash schema.json let's take a look on this really big json because it really like the actual api or the actual graphql server i'm just like pointing to has this huge schema it has a lot of different queries a lot of fields a lot of data to manage it's actually an anime um less website it's a big gigantic database that's why you've seen it all that so yeah it's just like all the data here some scalar times query times field times all the kind of stuff like graphql kind of provide and this schema pretty much going to provide us all the data we need and all the actual types and the knowledge we need in order to be able to query like the actual server from the client side and here using apollo graphql so we got the schema one step to go and we are actually done with that now you got the script you can run it whenever you want and that's actually a good way to get started now pretty simple now we've got everything we need we got setting up graphql just to at least get started with this there's still a lot of other mobile setup need to be done and we've got the up in here and everything we're going to be through now let's go ahead and run our react application so i'm going to do yarn stamped and just basically the scripts that you use for queer react up i guess i'm having another one run in i'm going to be running on port 30 i'm going to run a 30 one or 301 and that should get it up and running so let me get rid of this one uh that should work we got redox application we got hello world already and that is looking pretty pretty great now the endpoint for this to actually show you exactly guys what i mean just to understand how to use graphql with redux and redox toolkit and react and all of them together with this gigantic professional projects we have to go ahead and create something simple something kind of like a basic application and put everything in action for you guys to actually understand how everything can be connected together and how all of these technologies can work together to create the professional kind of like project and make it pretty much you know worth the name professional so this is the server one this is the graphql going to be testing along and this is what the scheme i'm gonna be using of course for debugging all the kind of stuff let me zoom in a bit because i'm gonna be needing to look into like a lot of data in here as we go forward now let's go ahead and set up a couple of things i'm gonna go like close this one we don't need it right now i'm gonna go to the up and just gonna go and create a couple of like you know containers using the stomach components now before that let's go to index.css i'm going to just make sure html body and roots which is just basically the root container that reacts is going to be rendered on i'm going to make sure to have width to be 100 and height to be 100 there you go looks good looks promising anyway and for this one also i'm going to be needing an up container so we're gonna go ahead and style div i'm gonna make it take full width as well full height and [Music] and yeah i believe um i might need a flex and a flex direction to be column and as well align items to be on the center okay sounds good i'm not going to go into the deepest css stuff in here just to make a decently looking website with a decent style and the decent alignments and layouts and all of that so just making sure that works perfectly now we got the updates in here up and running take a look on it now it is centered and everything as we want it to be now let's go ahead and create our home page container so for the frontal structure like my optionaid folder structure and that folder structure i'm going to be using right now is actually i learned this through like a lot of projects i started up a lot of projects i created and also by working on a lot of boilerplates that are being used by industrial you know big companies like airbnb facebook like really really big companies and teams working on these portal plates and yeah i'm gonna just basically use just a slice of this portion uh of the actual projects and and the folder layouts and all that kind of stuff in there so instead of the app folder i'm going to create two other folders one called containers and one other one is going to be called components so if you're asking why i did create these two specific containers with two specific names so this one the containers folder is just gonna basically like the main pages or the main biggest parts of our like application you can imagine those are like pages since right now on the website i'm gonna have like a multi-page application right so this container is gonna hold like a different folders each folder is gonna have like you know it's gonna represent a single web page on the website so for example right now i'm gonna be creating a home page and i love to put in pages like starting with a capital letter and here to tell them that this is a page and i love also to use tsx in here and name this index because this is going to be entry points of the home page then you can have as many other files as you want you can name them whatever but this one is critical name index.csx because this is the entry point of that particular folder of the home page and of that particular container you can name it whatever you want but it does the job perfectly so this for the containers for the components they are mainly like dummy components that all they do just like receive props and render stuff to um you know to the browser pretty much so that's that's all they do they don't manage say they don't know about state they don't know about the redox store they just like dummy components you give them whatever props and they manage the props they might have a little bit like internal state on them but they don't know the global store redox state that the app has so they can't actually pollute the actual redux store or the global state and this is safer to use this kind of like pattern to be able to use it and this is actually like called dummy components you can call them whatever but that's that's what they do in there okay so that's a basic structure that's a pretty pretty basic structure that we can go ahead and get started working with now index.csx in here is going to be like the entry point for our home page so i'm going to open up or import reacts real quick so i'm going to go export right now i'm going to export a function it's going to be home page and you're going to have props and all that now perhaps can be used that way because we are using typescript we're not on a normal regular standard javascript we have to provide interfaces and type ins for every variable for every arguments that we provide now let's go ahead and create an interface and the way i like to put in this the way i like to create my react components actually by defining interfaces that define the props for the particular components then we can you know either you can like explore the interface or not that doesn't really matter but what matters is actually you export the component and the props is actually typed and strongly types and it has the types of that particular interface of the props the name of convection actually is actually starting with an i and if this one stands for interface then whatever the component is like i home page then you prepend it um or you pretty much append it with a props because this is an interface meant for perhaps so all you have to do in here just provide ihome page robs and good to go so you can provide whatever you know props in here inside of this interface and they can be directly typed in their homepage but mainly for a home page we're not going to receive a lot of props because this is like a root level home page so it's not going to be called by something else other than just like for example react router or the index.jsx or something like that so you won't expect a lot of props to come from this okay um pretty cool so let's go ahead now we got the interface we've got everything let's go ahead and create a container so i'm going to do create a container for the home page i'm going to import style components again i'm going to use div and i'm going to make this to take full width full height again make here this point flat side flex direction to the column and align items to be in center pretty sweet now i'm gonna render up the container i'm gonna have an h2 or h1 for the title and i'm gonna name these like um hot anime and just gonna be like having a list underneath it that is the hottest anime of the month or of the day whatever that api is going to actually give us so we're going to render it beneath as a list go into the images all the data we can grab from the graphql api we're going to render it and organize it properly okay so we got hot name in here we got h1 going dart there we've got the container we've got everything we would like to get started working with now this is the home page we got components we got up and all the folder is actually you know composed correctly and everything as we want it to be now it's actually the time to go ahead and put our hands into the redox toolkit and we start actually signing up and adding the redux like a reducer to the home page so for doing that if you're familiar with regular redox you would actually need to add a reducer like you could be calling like a reducer dot ts or for typescript or whatever but in our case if you are using redux toolkits it's a bit different than the regular standard redox implementation so this one is called a slice and slice can be called whatever so you can call it like slice dot tsx or whatever you want so what i would like to pretty much call this one is actually home page slice okay and this is just like a naming convention because later on once we import that we know that this is a home page slice okay so this is going to be a time script and this is going to do all the magic for us so for this slice what we're going to be having it's going to like do a const i'm going to name it home page slice and it's going to have and i'm going to import create slides function and this one is actually in fact going to be imported from relax.js toolkit so i'm going to do import slides in here and the slice just basically a function that accepted particular objects that you know have a couple of fields and all the kind of stuff and those fields can pretty much tell how the slice is going to be created and for a slice if you're wondering what is a slice it's actually like a reducer then plus a couple of other stuff so if you're familiar with redox you got a reducer you got an actions and you got like uh the state itself like the selectors of the state so for those to work the slice combines them all together and puts them into something called a slice so this one it takes an object so we're going to provide it with an object real quick and this one takes a name every single slice needs a name and this name should be unique like you can imagine it as you read user name and this should be unique across you know the whole projects and the whole application you've got in here the whole redox store pretty much for this one i'm gonna name it home page that's it should should make the job and should do it perfectly now we're going to have reducers and this one is actually in itself is basically like an object so this reducers object take a look on this and mapping from action types to action time specific case reducer and this one is like the same way you do create action but instead you define them in here and the whole reducer is going to be defined on this particular object so what i mean by this for example let's say we got like a function and this function we want like on this reducer what we want it is actually to add into like a counter to the state so for that what we need is actually to create an initial state and this initial stage should be typed which means we should be adding an interface to all of that but anything other than that so to make sure that the initial stay is actually going to be um working as expected so let me do like a counter i'm going to do uh counter start a zero okay and here i need to provide the initial state okay so for this one i can do like sets or increments counter and by default for every single reducer for every single function that gets added in here it takes first the state the actual global store state and second it takes the actual action and you remember for every reducer for an action what it does have is just basically a type action or an action type and the actual payload it has that's that's basically what it does have pretty much and my mistake in here so i have to provide it that way i don't know i'm getting this error the parcel failed to match uh is there like another one yeah indeed so that's that's all you need now to make that work actually you have to return yeah you can return whatever you can do for example return um a new counter and how you do that you just like return state dot counter plus equals for example where is the equals plus one and that is it this one is going to like make that work perfectly for us um you know you don't have to return for this state to be actually working because it can still working without return sometimes if you don't want to like mutate the state directly this is not actually a mutation by the way because it's going to use immutable js and by just like doing this one the reducer will know automatically that you assign something like you assigned like a variable new variable in here it's going to copy the state create a new copy of it and it's going to assign this new copy to actual store state so that way ensures immutability i'm not going to be talking about this but sometimes you can return but since here we're actually directly mutating that it's all good pretty simple appreciate the point and you got plus one and by the way not i'm saying that this is just not mutating the state redox reducer in here is not actually muted in the state just for those of you who are going to come in the comments and say oh redox redux should never mutate the same yeah you're right and this is not muted in the state in fact this is just like an implementation that is you know just you do it because it's easy to do it this way but three actual slice function in here it's actually smart enough to know that we did a mutation in here it's gonna copy this one create a brand new copy of the state and it's going to assign it to the actual store so you have you're not actually going to do a mutation to the actual global react state hope i'm clear on this so that's pretty great that's all we have to do to create actually a slice and to create a reducer so right now you don't have to create new actions you don't have to create an actual reducer all in a single place now how we can grab the data or how we can like explore the action in order to manipulate that's how we can export this particular function luckily the slides have all that's covered so we can do i have to take a look on the actual home page slice there's actions case reducers a name and reducer and this is the reducer that should be exported and imported into the actual store and those are actually the actions that you got right down here so now what we have to do in here you can go ahead and export um we can go and like export from home page slice dot actions and whatever you want to explore in here for example um should be cost increment encounter all right and we should also do export default home page slice dot reducer and that is it pretty simple as that you got reducer in here created automatically for you from the create slides function and you got the actual action which is a normal action take a look on it it's actually an action creator with payload and this one takes in arguments as only the actual action we want nothing more nothing less you're not going to be providing the state or something like that but still this is going to be automatically provided and created for you and you got the reducer to care of all of it right here and you don't need to like switch case or create this really big producer ugly function redux toolkit takes care all of it all and it makes it look absolutely amazing so let's go ahead and get rid of this because this is just a basic example showing you guys what you can do with it i'm also getting rid of that we're still going to have reducer and everything now for the actual application we create we have actually an anime list right so an anime list is actually going to be like per pages each page i have have like a couple of enemies and all that kind of stuff so let's go ahead and take look into the graphic here in here and the actual schema it provides so there is actually a page so this page you know you just like use this query with a page number so it has some pagination going on behind the scenes so you can go like zero one two and you can you know paginate throughout this using the per page in here and you can have whatever per page you want now the page you take a look on it it does have a media has a users for that page it has like staff has characters studios media list many many many stuff in there but who we should be carrying here because all we want is actually to render out a couple of like animes that are hot for today so we need to grab a list of animes like a couple of data bots this anime like description the title the cover or banner image um like tags for this particular anime and this just basic stuff right and this all being held up for us on the media query in here so we have to query page first then inside that page you have to query the media which has all this types ready made for us okay so that's that's basically what we want there and that's what we want for the actual state to be in so the initial page stays in here should have like the actual page state and we should be having like a list of animes for for those so we can just like have anime um bliss and it should be an array for now it should be like an array but this is like doesn't have any types to work with or something like that so this way we're not going to be able to work with it properly with typescript so for that case we already got actually the actual schema of the graphql now the second thing we want is actually how to provide or how like what are the queries that the graphql is going to send in order to grab this dna from this graphql server so let's go ahead and write the graphql queries first in order to be able to generate or auto generate the actual typescript interfaces for us then they can make sure that we can use those typescript interfaces ready made here and we can just like use them right into our state and you know have them all typed together nicely using timescript so let's go ahead and do this and all we have to do about that is actually creating or adding and branding new script so this script is basically all it does is you're going to use the local schema and we're going to be having like a new kind of like graphql uh queries going on and this is going to just like combines them together and generate the interfaces throughout those okay so um actually before adding this this script in here we have to add a query at least in order to make this work now inside of the graphql folder in here um we can go ahead and add um let's let's see so graphql folder and i'm seeing that we should um [Music] yeah so let's go ahead and add the first to setup out like a polar graphql server or the actual client itself so i'm going to add typescript and for this one i'm going to do like apollo client in fact i'm going to explore this one it's going to create a polo it creates pretty much um client so we're going to import this one for a polar client or um so let's go grab i believe its name is apollo client so i'm gonna import this from apollo there are four slash clients as far as i can tell this is not how you spell a polar client so polo clients and this one takes a couple of options like the uri you want to select point into and that's we want a basic uri which is this one but it should be a graphql instead of a graphic url so you shouldn't you shouldn't actually forget about that stupid mistake there and also we have to provide it like which cache it should work with for now we're just going to use in-memory cache so like apollo graphql is going to cache the requests in memory so if you like you know close the browser or something the cache is gone and you have to like redo it from scratch but there's other types of crash in here you can really learn more but for now in memory cache we should do the job for us perfectly and without any issues now we've got the apollo clients in here we can go and export it we can use it whatever now let's go ahead and provide this throughout like the provider throughout this application so i'm going to be using apollo provider and i'm going to provide it with appliance i'm going to import apollo i can actually spell a polar clamp properly so that's copy this and put it down there and the reason we're actually doing this apollo provider just wrapping the actual application because this is the main entry point for our application and this is actually going to be using select the reacts context api so this apollo client briefly is going to be available throughout all the components inside of this up component so all the child and all the children pretty much going to have this apollo client available either throughout hooks or higher order components that react can provide throughout these pretty cool so we got the basic stuff set up we got everything we're going to be needing now it's actually time to go and create some simple queries that you can use for graphql then we can use to generate these typescript interfaces so inside of the op what i'd like to do is actually create another services folder and this one is going to be like all about services what i mean by services like like a singleton class object instance that can allows us to do api requests either restful api request or graphql request which is in our case is more about graphql and i would like to create another folder inside of the services i'm going to name in this it's going to be more about anime and so i'm going to be naming it anime page or or something like that if i'm if i'm getting this right or like um page service i'm getting this anime service okay should make more sense to it that way so index.typescript this should be the entry point and i said before this is a class and i i love to put it this way as a class because once you put it as a class you got all the functions like beneath each other's and all of these functions actually like all they do is just like do requests and receive response and hand them properly then handle or hand them into the actual react components then you know they encapsulate and abstract all the teeny tiny details or you provide like um you know like a zoomed out api that you can use so that's that's the point i want to do right here so i'll name this anime service i'm gonna be a class i'm gonna export uh default it's gonna be new anime service and that's that's basically all we have to do right there so this is the anime service we got the class we've got the instance server app and let's go ahead and create a queries so i'm going to create a new folder called or pretty much new file called queries.typescript and this file in fact decided the enemy service is going to be all about queries that belong into that service only if you want another service and another query is related to another service you know you put it inside of that folder and that way everything is actually organized the best way possible and you can quickly go through your code and quickly understand which file belongs to whom and on all kind of stuff in there pretty cool now let's go ahead and jump into creating the query in here so for a query all you have to do is like create a regular query make sure to export it do a const and what i love to name our queries actually give them all capital case query names at the beginning there so for example get anime page okay and this should be pretty self-explanatory i'm going to use the graphql or dql tag which is from the gaf ql tag in here and you don't have to install this because it's actually going to be installed from or pretty much like where the actual graphql and apollo you know uh moto is going to be installing so we got the tag in here and this is where you pretty much provide uh all of those if you're not familiar like how to work with that and react to never do it before well this is all you have to do it like inside of the template literals like style component does you have to put in here you have to put like the whole query schema in here inside of that and likely if you've got something like uh graphql and you've got some apollo graphql extensions for example this one installed it's going to give you a lot of like you know help and into license and you know code coloring and color code hints and all the kind of stuff so make sure to install those i believe there's another extension called graphql on itself and it got it installed yeah that one and that one should also tell you uh like how graphql should you know it gives you something to license and color um highlighting and all of that kind of stuff so yeah extensions do really really help with all kinds these type of stuff okay and they are really really important for you to know now for this one all we have to do like run a query and make sure to name your query like right now name it a perfect name because later on you're gonna use this name inside of your type script are kind of like files and you know the the interface is going to be generated with this name prepended on it so make sure to choose the right name for it that is descriptive enough to the current query and current request and the data is going to be like querying out from the server okay so we're going to do get enemy page and this one is going to be like a simple query and for the page itself as we did before it takes a page which is an integer and it is required and a per page which is also an integer and required so we've got page in here we've got per page now we take a look on the page in there and the page we just like have to like we do forwarding the arguments so for example this one you can imagine this is a function it takes the actual arguments and you take the values then pass them through to the actual query and this is where the graphql query goes so so you provide them to page then per page and the reason i'm like prepending a dollar sign in here and this is how you actually tell that this is a variable name on on graphql or this graphql tag in a polygraph kio otherwise it won't work for you properly so pretty cool now we got the page now we have to actually do something inside of the page the page has a media and media has all of these different types inside of it so let's go ahead and grab the actual data we want we want to id want a description of the current item and i'm sorry i need a media first so we need to provide media then we can do id and luckily media is lowercase cool got description uh maybe you're going to be giving a title for the actual anim um also going to be needing a cover image like which the cover image is and there's actually different kind of like you know sizes for cover image i might need something like a medium there is extra large large you know all of that but i'm just going to need only that and basically for the title also if you take a look on this i'm not sure where is the title but it should be somewhere in here there's a lot of fields like ridiculously a lot yeah i don't know where is the title actually but yeah so for example take a look what is that um the id is actually an integer a tag is a string um yeah so yeah let's let's just go ahead and use use it from that perspective okay so tyrone here has actually had different formats like uh romaji i guess has english has native which is you know native japanese name of the actual anime but for us we only gotta be eating english and that should that should make his uh pretty self-explanatory i guess so that's the basic query that's all we need for that query i didn't add everything but yeah i'm gonna use those basic stuff for now to get started get like a basic request going on and grab the data from it then we maybe can add other fields and you know add them to the ui so now we got basic queries to get started work with now let's go ahead actually use the power of apollo cli alongside typescript and the schema we got already the graphql schema to generate the interfaces needed for our like you know the query in here and to be able to use it throughout the application so this one i'm going to be creating another script in here and it's going to be beneath this one so let me add a comma go beneath this one i'm going to name this for one um schema generated think this should do a pretty good name so yeah i mean i mean that that should that should make it happen uh pretty quick and also i want to add like dash watch into it because this one is going to like a run a watch server so every single time you change the actual query like this one all it does check for is actually the dql tag in here so whenever you do a change into it it's going to like rebuild everything it's going to regenerate the actual interfaces the time square interfaces for you so let's go and do apollo um i'm going to use in the code gen command in here so code gen and generate and this one only does basically just like it tells you to generate a particular schema for a particular uh language so likely we're using timescript since it's code is you know supported enough and we have to provide like local schema file i believe and this is where you you tell which like which direction or the destination of your file so it goes graphql then graphql graphql-schema.json okay then you give it like the target and we want to use typescript and last but not least we give it a tag name and this one like which tag name it does check for and the tag name is basically like this is the tag name so we wanted to check for dql and whenever he finds gql it pretty much does a code generation for it okay and last but not least we have to provide watch pretty cool so that's all we need to do let's go and like i create a separate um terminal for this one let me just take this a bit up and i'm gonna run yarn schema generate dash watch and this should make it pretty self-explanatory already and this one is gonna just like grab the apollo cli for us and it's gonna start watching now the schema has been generated for us and everything is going good the right way it's curious in here we got targets and wrote two files uh on target typescript to take a look on your project you're gonna find new like two new folders generated for you and they are pretty self-explanatory they're called underscore underscore generated score underscore okay and this one is actually a global times generator for you which is basically empty because we don't have any global queries we're actually using that is good the second one the most important one is actually generated instead of like the service and it's just like underneath and beside the actual queries um file which basically has you know the actual query we generated in here what we created so it has this generated and this one it has like get adding page which is the same name as this one which is pretty great for us take a look on it you're going to find all the interfaces you need for the typescript and all everything pretty much you need and and this one is actually like english it's either string or gnome which is you know brought from the actual scheme here and it did a combination it brought everything for us and generated this awesome interface for us to work with pretty cool now we can go ahead and use those and we can for example say like get any page and it has a page inside of it then you know we can we can go inside here and there uh to to grab that part pretty cool let's go ahead and use that and we can get started from there so i can go back into here and i'm not i'm going to change the name of this one i'm not going to name it any list i'm going to name it um anime page because you know that's what it's named just to keep the naming convention together and that should be identical now for this one if you take a look on the types again it's called get anime page and it has like get on eb page which has a media and the media has uh where's the media the media has all of that type of stuff okay it's either no or not and also it's either array or null which makes it pretty self-explanatory okay so we get get anime uh where is that get anime page um yeah that's that's not actually um on the inside so we can manually import that so get anime page from you just go back to or it's actually on the same directory right oh yeah we have to go back to like well the files are contained for example services anime service then generated that get any page pretty long ridiculous name but it's worth it okay i'm gonna use that and we can make it that way so get enemy page only um yeah this should refer to your type yeah i'm sorry i this this can be happening here because we have to provide an interface for this one to work and for the interface i need actually my naming convention or how how i put it together is actually create a new file called types that has all the types regarding the current container so i want a lot of doing it like times type script and all the types exist in here then we can import it right here okay so i can export interface and we can name this i home page states because this is the actual main stage of the home page uh container in there and we want anime page so get anime page and this should be all important for us pretty pretty sweet okay so we go back here we got initial stage and it's i home page state all right and uh you have to provide anime page i don't know anime page which should be defaulted to it should be defaulted into null okay luckily no defaults exist for us and um type extended proper anime pages declared here okay type number is not assigned type get anime page oh yeah i should um yeah i should i should did like get anime page then page because that makes more sense because we want to access the actual page okay makes sense so we are not access this one because this one should make it either no or not and this should work for us pretty pretty well now we can go ahead and add the new reducer using our awesome redox toolkit and we can just go ahead and use like the sets um like whatever you so it's basically as you're naming your actions this is how you do it in here on the reducer so you basically like create actions and the reducer is going to take care of it all and the slice is going to take care of all and you got everything ready made for you okay so all we need to do is like to set anime page for example so this one takes this data set before and it takes the action and the action is going to be basically like the actual anime that we want there okay so that's what we want to do here and we can just gonna provide it yeah this should be a method right google method okay so for this one all we have to do like state nap dot action dot payload and the action already got the type so you got either a payload or not and yeah i'm guessing in here you could also provide it like the type of payload it does expect uh which makes it a bit better i believe i never i never tested that but yeah that sounds that sounds like a really interesting uh kind of kind of thing to do but yeah nonetheless so that should make it pretty great anyway and you can go ahead and export the anime page already and that should make it pretty pretty great for us to go ahead and get started working with now we got this one we got the reducer we got the action set enough for us now let's go ahead it's actually the moment of truth we can go ahead and now set up a service or like a service method that's going to take care of like graphql senders request grabbing the data from the graphql api from like the anime graphical api we are using then it can populate the redox there eventually to work to make it work together okay make sense let's go ahead and do that inside of like the services anime service and inside of index.js or typescript we're using timescale by the way so i wanted this to be asynchronous and i wanted this like get anime page all right and what time like which the page number we want i'm not going to have this as a default i want to make this to be a number and it should be a required and i want to have like a per page and this one should be like a default value of five i'm guessing i'm guessing five should make it good okay and this one should take a promise all right so promise and i promise you should expect to get anime page and a page so we should return the actual page from that um pretty cool so let's go ahead and do that so we can go ahead and grab the response but i want to like always always make sure to wrap them using try and catch so that's why i'm doing in here so i'm wrapping all of those using try and catch so i'm getting constant response i'm going to use async weights that's why i declare the method on top there using async makes sense and i'm going to use the apollo clients we got that's going to be imported from the actual graphql file we did set up earlier so we're going to do a polar graphql we're going to use query i'm going to provide i don't know i did double parentheses so i'm going to provide like a query i'm going to use the query we already did i'm going to provide it with variables and the variables are page and per page pretty easy so this kind of structure makes it super super easy to work with and in fact if you make it using the services and you like you put all the requests and all like requests response logic inside of like a single method that takes care of it all the using really elegant and tidy prompts api well you know all is abstracted in a single place especially this is an advanced application this project is meant for huge and big kind of like you know applications and projects and like you know like five ten years projects with maintenance and future scales and all the kind of stuff so you imagine yourself having like hundreds of functions in here and they can all live together in peace and harmony and they can make it all work together because they are pretty tidy and making self play explanatory pretty cool now we got here we got a response and everything now i want to check if there's no response or no response.data so all i want to do is just like throw up a new error and not get anime list all right otherwise all you have to do just like return response the data makes sense pretty cool now we call the catching here all we have to do uh simply for the catch i want to just like go ahead and throw up the error you can do more handling here for the catch specifically on your application and your case scenario but i would just like to throw it then it can use or handle it later on that is not a big of a deal pretty cool now let's go ahead back into our like home page and this is the moment of truth and this is where we want to like go ahead and like ask for the home page or the actual anime page data that's going to be getting from the graphql api then we can go ahead and render it out so i want to create a new function i'm going to like fetch anime page okay let's name it that way and and yeah so we can make sure to use this as asynchronous just to make sure that it works and i want to use like const i wanted like um anime page equals weights that i'm gonna use um anime service get anime page i'm gonna provide zero gonna leave there as a default so if any errors happen anyway so all i do like console.log error and the air pretty pretty easy um now for the anime page we either got void or something so if anime page i believe this anime page should be something right um yeah it is so any page now should have like a media then a media should have um which is an array then we can loop through it and all the kind of stuff in there now we don't care about that all we have to do just get the enemy page let me go ahead and make sure that the ap is actually working by just console logging what the anime page is so i want to do console log anime page anime page okay and i want to call this using user effects so on bitmount we want to call that right into the point so go back approach enemy page just call it up that way and that should make it work now let's go and see what's going on behind the scenes in here let's take a look on the actual console uh we're gonna open up this so we got uh store does not have a valid reducer make sure the argument passed to combined users objects yeah i guess i never actually combined and put something into the store that's my bad and i should like i should make this [Music] home page um yeah home page this should be a reducer instead of a slice because it really is a reducer it's not a not a full slice okay that's the slice is reducer okay makes sense makes sense uh if we take a look one more time refresh uh is defined but never used i'm not sure what is going on there but it should should work i'm not sure why it doesn't yeah i'm dumb enough that i haven't called that one i haven't called the home page here yep it happens but anyway we got the home page no finger cross that should work response dot text is not a function cannot convert and define or not to objects and posts take a look requesting here graphql strict origin when cross origin yeah it makes sense so i'm guessing in here i'm having like a wrong address so after i changed it to graphql analyst dot co i think this is the right one after you just like debug this for a couple of minutes and also the second one it seems like we got some issue with per page so it sounds like per page has never been used here uh which is pretty weird never used don't get any page so i'm wondering why per page yeah page has never been used which is pretty ridiculous by the way take a look again uh there doesn't seem to be any errors error provided does not contain a stack trace we don't care about those this is actually just warnings and there you go we got the page you got the media and we got the five names we requested for we got intro word the distance i don't know what what's the any name here cowboy bebop okay trigon um yeah we want to we want to attack and sign it if you know that i know me um i'm just like that guy who's just mirobot anime i watch a lot of like anime so uh yeah i know i know a couple of them and i really did enjoy watching all of them so yeah just just a quick notice about me and myself okay so we got everything in here we got the anime page uh it's being loaded for us we got the anime media the title we got description cover image which is uh i'm guessing this is uh yeah i've take a look on it it's a cover image to medium and i don't want a medium i wanna i want more like um a large i believe or extra extra large i'm not sure which one available um so let's go ahead and use extra large we always can you know like uh minimize these and it can always look good so take a look again on those so x dollar yeah we got this large in there uh makes sense pretty pretty cool there okay sweet now we got the anime in here we all got the images and everything now let's go ahead and render the list we got in here and in fact before rendering we need to put those into the store and we make sure that those are living in the store indeed not outside or something like that all right so let's go ahead and do that real quick i'm gonna go to the index.typescript in here i'm going to use the dispatch and everything that's going to be used right there so i'm going to do in here calls action dispatch and this one's going to take a dispatch which is basically the dispatch function going to be provided by reacts redux this one's going to return an object and this object the way you love to put it in here because this one's just going to be basically an object of different methods that's going to dispatch the actual redox actions i mean and i love putting it that way because it's much simpler to track it on a file and in fact it's actually on top of the actual component so you immediately realize that oh this is a dispatch and this is what this component is actually dispatching and this is how it's connected to the actual reducer store so it should it should make a really good sense to look at it and see exactly what's going on behind the scenes in there so i want to do like say anime page on top uh it takes a page which is basically that's anime page page all right and that one should call it dispatch and set anime page and this one in fact is going to be important screws in here from the homepage slice which is the actual action we just you know exported and you see how cool is that we got the action and the reducer both created with just like a a couple of lines of code we didn't go and create a separate action and a separate reducer then we use that here and there there and it makes it much more complicated and much more harder to put cutting and use redox on the app but redux toolkits makes it super super simple and straight to the point all right so we're using here the page and that should make it um good already so we are good to go in there we got here so take a look in here for anime page if it is available so we're going to go ahead and call that but i need to go and use this one so i want to do go ahead um so set anime page so i want to use use dispatch which um i want to use the use of dispatch which is provided from the the actual template in here which is batteries included and it has like timescape included which makes a lot of sense to be using this one actually and this one should be passed into the action dispatch all right otherwise it won't work but that way it should make it work so just put it out that way enemy3 we just save that and there you go that should save the actual anime and it should put it on the stage and we should all be happy about it to work that way pretty cool now we fetch the anime we put in there now let's go and create another components inside of the homepage container that's going to take care of rendering and grabbing the actual enemy page list from the redux store then renderings all into their page and this is pretty much going to be the final step into this just to demonstrate how redux graphql and everything can work together in a professional grade big application with all of that startup we created over there all right so let's go ahead and do that i'm gonna go and create a new file i'm gonna name it animelist uh or just basically call it hot anime makes more sense to use that way so import reacts again as we do always so reacts um then export a function which is just hot anime props uh in fact we don't need props so i'm not going to provide any interfaces or something that you know they won't make sense here because we don't need them anyway and we got the hot anime in here looks good looks pretty pretty interesting now how we can provide or how we can grab this data from the states and to actually actually or pretty much to access the states we need to access the home page reducer state and grab the anime page list so we can do it normally with use selector and all of that but i would love to use actually use like create select your library so if you're not familiar with create selection library it's just like a basic library made up for redux and reacts to work together in order to be able to facilitate and make it easier to create and like grab the state and and make sure it's like grabba just these tiny teeny pieces of the state like uh you know the smallest fields the smaller properties of states without the hard spots without putting a lot of code and you can have those files like living inside of the containers then you can use them across the whole application so i'm going to add those and i'm going to do our yarn add reselect which is you know the create selector and the other one we want is actually redox logger to add a little bit of login for development cases to our application so we wait a bit of these to actually gets finished and installed into projects and there you go so they are both installed ready to made and we can get started working with those so we go to the home page you could create um selectors file and i love to name them selectors because pretty self-explanatory what it does and on the top in here i'm going to make like do select home page which basically this one's going to take a state and all it does return is actually um so this state is going to be any from in this case so return state dots and and this is where you access your reducer name so if you go to the store the reducer name is actually home page so all you have to call is like state.home page and and that's that's pretty much it for that case okay um so why const is a global script file okay whatever so let's go and ignore that i'm going to do export const make select and we want to select a specific case which is the anime page so we want to make select anime page and this one is going to have create selector and this one this function creates a lecture it's going to be imported from the reselect we just downloaded and this one in this case what it does it's gonna actually you give it a bunch of selectors and you can select from so for example here like the first argument it takes like the global state that you want to select from so the global state is actually the select home page which is a function itself so you all you have to do just like provided that way and it should call it with the actual state provided there the second one is actually a callback and this callback what it does is actually going to give you after you close this one you're going to grab the home page for you so this one is going to like return the whole page with that and you can access whatever inside of the homepage for example home page you want to access the anime page pretty simple now reselect increased selector made it much much simpler for us to always work with that because all it does it goes you query the global states it grabs us the actual little tiny reducer home page and after that we access the little tiny field which is the anime page pretty pretty simple and that's why i talked like crazy lecture or reselect are pretty pretty good uh combination to make these work together all right so let's go back in here we got um so the hot anime in here i'm going to use the states so i'm going to do constant selector and i'm going to do create selector and every single time you want to use another create selector you just like call the create selector then you can combine them together like all the create selectors you did like for example this one is a create selector function well you can use this and a bunch of others all together so i'm going to use this like make select and in page and by the way the name of convention of this one like for selecture is always to prepend it with a make then select then whatever like property you want to select from that just to make it pretty self-explanatory now it takes a callback and the callback should actually return an object and in that case the callbacks actually the arguments are you know uh ordered by that way so here for the anime page we're gonna provide anime page and we want to return the anime page itself now the anime page is just like you know any for now but we can use it later on so let's go ahead and do that let's go and grab the data from this so i'm going to use this i'm going to grab or destroy the anime page i'm going to do use up selector remember we're going to use the custom selectors we created with the types and we want to just use like the state selector real quick in there and that's it we're good to go we got the enemy page and after it gets populated into the actual redux store we're going to get it right over here now let's go ahead and render the actual anime styles and everything we want into that particular part so i'm going to here i'm going to do i want to make sure like always put the state selector on top of the actual components so to do that all i want to do is basically create a container for this so hot anime container so it's called styled and i'm going to call div and for this one i'm going to have like a maximum width of um 280 pixels or something for that also make sure with takes 100 height is going to be 100 as well it's going to be display flex okay so this is the actual anime i also want to have like another anime item for this so what i want to do is um is actually i want to like have an image of the anime then beneath here some like the anime title then we can go from there so anime cover okay any cover i'm gonna call this dev as well um so for this one it's going to have like the width to be auto to like preserve the aspect ratio and i want to also have like heights in here for example high is going to be 10 am or something inside of it there will be like a child which is the image child and it's gonna have also width to be auto heist to be 100 again and that should make it uh going pretty great now also i want to like do [Music] uh anime title okay so i'm going to do style dot span or basically do you want like an h6 or something so uh we want a fun size of something like uh 19 pixels and a color of completely black and the font weight should be something like um 600 i guess that should that should make make it look pretty great uh so far so good and also i want to give it some like margin to the top of a football icon 8 pixels so those are actually going to be combined inside of like the ohio ime container and i want to call this like anime container so um i'm going to call this like uh more like anime item container okay because this is going to represent a single anime container if that makes sense so for the width i am going to make this um all right i'm going to i'm going to give it a maximum or just going to give it a single width of [Music] the 12 em or something the height is going to be 16 yeah we will see about those in a sec display flags and flex direction i want this to be a column as well um so yeah let's go ahead and render these and see how it looks already so we've got hot anime container then we're going to have enemy item container and for this one it's actually you know we've got a list of anime so we have to loop through those and see how they are actually going on so if we check in here if anime page like if no anime page in here um so i want to do a different type of checking so if do like is empty anime page so for that we do like any page dot or not anime page or animepage.length um equals zero i think i think this one has a media inside of it so not anime page or not anime page dot media or animepage.media.length equals zero so that should make it a little bit better and more self-explanatory i guess okay so we got this mti name in here so if it is actually empty all we'll have to do is actually just like return no so we render nothing you can add loading or whatever but i'm not going to bother myself doing that right here and the actual enemy container here have to loop through all the animes and we render all of those so anime page dot medium dot map and it's gonna be like anime like a particular anime for those then we can have the anime container inside of it can have an anime cover and we have an image and yeah we can we can like use the image in here so we can do animate dots and in fact this should be uh okay so we can we can go ahead and tell it about a style like uh get anime page but what i think better we can do especially to make this is more like a typescript friendly is we can go ahead and use uh like the make select anime in here so we tell it about the exact state that we want to use uh to make that work so i can go and select the up creates another file called types.typescript and this one is going to import interface i root state okay and this one is going to hold all the reducers all with their state so just like for typescript uh to make it work properly so for that we got like the home page and we got this i home page state that's gonna be pointing it right into there and make sure you name this field as the reducers otherwise it's going to be really creepy for you and sometimes it causes you some issues okay so in that case we're not reducers so i would state should be important that and we should access the ihome page and the i home page should have an anime page with get anime page which should make them all types together in a really really smooth way as clearly now we've got the type like get anime page all right so we can go and use that we can we got media we got everything so object is possibly null yeah we already checking for that i guess um okay media oh okay and anime page media then amy page.media. map then we got an anime here which is basically an anime media or a null so we can do um anime we can we can use the new feature of javascript which is like like inline checking of of the current value of either null or not so if this is actually no it's going to be not going to be executed that's why we add in this um question mark there just to make sure so we got this one cover page we got uh we need to use the cover image and inside of the comment image you want to like extra large and i'm guessing this is either string or null so make sure or empty string okay because literally everything is is a string so you have to check for that before we render it and we got the enemy cover now let's go ahead and do the next one which is enemy title so with us we're going to do anime dot title dots english okay sounds sounds pretty interesting let me go ahead and add a little bit of like spacing between those and i want to do list like justify content so space between well let's do space evenly i should make it better i guess so now we can go back here we can go and use the anime list all we have to do just like put it that way uh which is hot anime just just that way you don't care about like checking if the dna exists or not because all is going to happen behind the scenes the redox store is going to take care of it the state is going to be populated correctly and all the stuff is going to happen in behind the scenes for you so that's all you should be caring about just save that we go back here let's go ahead and see how it should work on that so first things first take a look on the elements and that doesn't seem to be any kind of anime going on or nothing is being rendered actually so anime page let's let's go ahead and use the actual redox logo because it's gonna help us a lot debunk the application and see what's going on behind the scenes so that's we're gonna use it on the store in here um i'm gonna do like like whatever here i'm gonna just gonna create the actual redox logger so you can do cons middleware equals um get default middleware then we can use this get default middleware then we can just now go ahead and concat with redox logger so and that that should make uh pretty good sense here because we got the logger and we got everything we would need so redox longer there um so there you go yeah we might need some declaration types for that so we can go ahead and install that real quick for redox logger and after installed we can go ahead and use that so we can use this middleware down here just pass it through and that is it okay uh pretty promising let's go back see what's actually going on so it's actually failed to compile uh but there you go so we already got redox logger working so it got set anime and it's being sent in the anime with a payload of a page now the home page has an anime page which has a page inside of it and there is a media inside of it okay i think i'm doing some wrong checking for all of that because right now here uh it has like anime page then inside of it there's page then there's media but i think i'm having it wrong in my typescript so if you take a look here this this should be the page not media which i'm completely getting wrong why this is happening so um i should be calling this animepage.media yeah because i guess i'm returning here the theater but i should return theater.page okay it makes sense makes sense so let's go back here uh that shouldn't change anyway so let's take a look right now we've got anime page to be in defined which is i don't know why [Music] so we got media yeah where is that so index.typescript so this one is an anime page page right because this is going to be a page [Music] returningresponse.data.page let me just data data and see what is actually going on inside of there i think this is a capital page let me let me double check yeah dna is the capital page all right all right makes sense makes sense okay so i'm having that one here let's see what's going on up there so we got anime page we're putting it immediately down there so the anime page uh we're getting this response.data.page yeah all right but we're still we're not rendering anything pretty much that's uh that's weird i want to know why this is happening and yeah we should we should like do is empty not is empty so we should remove the knot and yeah i'm guessing that's what's blocking it and there you go so you got the anime in here we got like a bunch of lists of them uh witch hunter robin you got you know a couple of them i mean those are like a pretty basic and i think the cover images are are pretty small so you might want to play with these you can you can you know you can go through this you can play around those um so for example with i can increase to 14 this one can be 218 respond to 13 maybe to make them even bigger 15 uh yeah i guess i guess that should uh i should make it look good so anime item container in here we can also do a line items to be on the center so everything should go into the center even the the text beneath it and even the text i mean that's a pretty big text we don't want the font size to be that big uh we just want it to be looking good enough i mean 500 i guess should make you look better uh in that case and there you go you got yourself like a pretty good and and it has like all the enemies in here if you want like more data to be fetched from the api well i mean yeah you could you could you know have all of that you can for example popularity you see um what is the popularity here you can see average score which we can render in time here so all we have to do if you want like to add a new field likely we got everything set up we got the watch happening working in here which you know basically watching for this queries if you add another query it's gonna it's gonna compile it down to typescript um yeah if you change it this one's gonna compile it down it's gonna add the new fields and everything's gonna be ready made for you so you don't have to change even a single line of code so everything is going to be put together for you which is pretty pretty awesome um in that case so for example if we go uh where is that so for example we got um average score we maybe need like a adjourn like what's the actual type of this maybe so we can gonna save um that already got an issue did you mean generous yeah i mean let's get rid of that we don't need it so we got every score in here if take a look on the generator files we got uh score every score in here is already like populated for us and updated which is pretty sweet now if we go to the actual animate here where we are rendering we can say for example like a span or like a b for a bold and we can we can make something score or average score and we can make that so we can say anime dots average score and take a look in here and there you go we got already in every score for us and so average score um yeah i wanna maybe you wanna just take this a bit smaller [Applause] oh my god that's too small there you go so we've got every squad as well working out on top of there um yeah so i mean stalling isn't our like necessary thing to do for that if you want styling you would have it a bit differently but i mean that's that's looking pretty great all right and we can we can have like more annums being added and they can all get together i guess uh the right way so if you want to like get anime per page and we want to like provide you want to get 20 anime per page there you go uh yeah it's pretty huge i agree maybe you want to like do a flex wrap rap for these two work yeah there you go they're being wrapped up correctly and you got a pretty big list of anime that is all working together if you choose another ridiculous number like a 200 i know that's gonna take a bit of time to take effect but still you got a 200 um anime working on in here so you refresh it you maybe want to add another like a loading thing make it add yeah you can do it so here instead of returning all you can just return loading like three dots you can figuratively find a better way to do it but it's greasy loading and it loads all of that anime and you got the full list of animes from one piece naruto um yeah i know a few of those but yeah looks interesting and it did i did really like putting some kind of a project like a unique idea differently and anime was was the good way to go and this cool website i really appreciate it uh yeah you provided with an awesome graphql api to grab anime and all the dnv ones so yeah so hopefully guys that was it i hope you guys enjoyed this video story i know that was a quite long video tutorial and quite complicated but for those of you who wants to be professionals and react with redox and you know redox store vloggers and using graphql all mutations and typescript and all the kind of interfaces and all this kind of complicated stuff together well you are being in the right place and hopefully you'll learn something so if you want something new something like that let me know in the comments i'd be very very happy to you know just like take a look on your thoughts and your ideas and just come up with new stuff like this and why not so hopefully you guys enjoyed it hopefully guys you're going to enjoy the next videos as well catch you hopefully in the next ones [Music] you

Channel: CoderOne

Views: 9,264

Keywords: React, Pro React, React for advanced dev, React devloper, Master React, React from scratch, All you need to know for React, React Redux, React Redux Toolkit, Redux Toolkit, Redux Beginners, React Apollo, React GraphQL, Apollo GraphQL, Javascript GraphQL, React Typescript, Typescript for beginners, Master Typescript, Use typescript React, Learn Typescript, Typescript GraphQL React, React redux typescript graphql, React HTML CSS, React Basic Project, React Anime, React.js

Id: M_Oes39FNuk

Length: 98min 4sec (5884 seconds)

Published: Sun May 02 2021