React With Redux, React Router And API Integration - React.js Tutorial

hey guys in today's video on a teacher to create is pretty simple reactor but I think it causes a lot of Kiryat concepts so we're gonna be using react router and in this app so to handle our routes what's confusing a redox for state management alongside read react Redux and the API that we're going to be using to get the data is this poke API this just returns some data by pokemon i've used in the past and it's quite nice so this is the home page and on the home page there's not much going on but with his such bar here so you can search for a specific Pokemon there's pagination at the bottom alongside obviously all of the specific Pokemon the pagination itself actually works so we can get like the third page or even the last one and then we click view on a Pokemon it shows some extra data about it I know the API returns more but it's gonna show you guys a couple of just some of the data and this can be used for and anything you want to show so yeah now we can just also search for so if I do Pikachu then we hear all of Pikachu's data and if I do let's see one that does exist it says it's unable to get the Pokemon data so what was the handling Garrett's okay so to get started let's create our basic reactor template so you want to open up your terminal I'm using the integrator terminal here you know type NPM I'm sorry and the X creates react I specify the directory you want we're not gonna be using typescript in this video I don't think it's necessary for this so this will just take a moment and I'll get back to you guys when this is done okay it's not that the basic crack tab template has been installed let's I don't know independency so the rock type NPM I or install and then our dependencies the first one is Axios I also want a low - kind of one react Redux along with the redux we're gonna Redux thunk - asynchronously get data using Redux and I think we should also get Redux dev tools extension scissors Axios lodash react Redux Redux Redux thank and then redux death those extension I always had to send I find it quite useful but in case if you guys are using this mutual not to include it in your production your production build say this will just take a moment I'll get back to guys when it's done as well like it's now that all of our dependencies have been added let's start off by going to our folder and then opening a purchase so let me close this so we can remove most of this and we don't need shall keep the CSS import but we don't need a logo that's the start off by creating a stool so storge s we're going to import create store it's now our stores gonna be a constant create store so we're going to say a root producer which we haven't created yet but that's fine next you want to import two composers with dev tools also gonna want to import apply middleware and it was are gonna run import thunk from aviary duck stock it so now what we can do is compose the dev tools apply middleware and then funk now let's create this reducer so I'm going to create a new directory border reducers sight of their create a file called route reducer Jess now we're going to say we're gonna have to imports combined reduces from redux we're going to save route reducer is equal to combine your juices now I know I'm going over this quite fast I do have other videos on this so I'll leave a link to those and it's going to be empty for now export defaults reproducing okay let's import I here I guess now that's fine that's actually export this as well then if we go to our indexed or Jess I'm going to right actually I'm going to first import provider from reactor redux we're going to say that store is equal to store so just make sure to input that okay so now let's just start up the project so in your terminal type NPM run start this will run the server on localhost okay so that's empty if we open up our dev tools and if we go to redux it's oh is it's here so that means it's working normally you'd get some sort of error message if there wasn't configured so that means everything is working fine and we can just test this free say right test there should say yeah so everything's I can find our stores muster up and it's all connected so let's now get started by just creating some basic routes and handling that so what we're gonna wanna do is go back to our index index touch s let's import browser router from oh I think this is actually we forgot to store so I meet the NPM I it was react for out Dom say that browser out is from react Rotterdam so you can just add that and while it's installing it's gone through an error but that's fine and then what we want to do is wrap the entire after this so browser router now we're gonna put those two in here and yep that's fine so this just again that's the all of the nested components within the browser oughta have access to certain props it's not what we're gonna do let's close store and just close reducer for now let's create a new folder here called containers and then let's just create two basic containers so personally going to be Pokemon list but yes and I'm just gonna import reacts from reacts let's say Pokemon list is equal to there's just a normal functional component I'm just going to return a div the same token one list we're also going to use props actually we're going to use props for this one that's fine let's just I remember to export this now we're going to create another file called Pokemon grudges so there's going to be an individual one okay let's just copy and paste all of this it's changes to Pokemon it's now hopefully it since thought yep so let's just start boss over again so NPM runner starts so as you can see everything is working fine okay so now let's go to our app and it's will add in a navbar in a moment for just for now all I wanna do is extra stop the routes as import switch and route from reacts router Dom and then we can do it as a switch so this means it's only going to match the first route within here so we're gonna say routes we're gonna say path is just this is just gonna be the base part and I'm Wesley exact as well and the component that's do is the list so it's going to be Pokemon list so make sure to import as well let's copy-paste that and say it's a Pokemon slash and then here I'm gonna say Pokemon again now you see the semicolon here that means that this can be you can think of it like a variable so this could be anything so if there's some comments here oops I'll put some comments here and just minimize this so it could for example if the route was slash Pokemon test this would actually count as this path here and if the route was let's say anything then this will also count as this but if we were to let's say do this then notice but none of these two paths with match so that's what all this is it means that we could just we can extract this value in it and this value could also be anything I'm choosing to call it Pokemon so yeah that's that it's also gets a couple more things so our nav link and I want redirect so redirects it just can now say to slash the thing that should be fine so if neither of these too much it's going to go to this and all this can do is just redirect or back up here so that way if we go to unknown let's say a 404 page then they would just redirect back to the base page so yeah now you can see we have Pokemon list if I go let's say I go to a random one you can see we get redirected back to the base path and I say for Pokemon slash Bulbasaur a I just don't Pokemon list and all that's because I got to change this but now yeah now you can see we're on Pokemon now just to show you guys what I mean by this about how we have this as variable if we go to Pokemon and we take a look at the props so that's console.log props if we open up the console you can see that props is an object and we have a couple of things so this is given to us because we wrapped our entire app in the browser Otto so now you can look through these so there's some so let's say for example and I think history there's some function C so pushes one we're going to be using says to redirect someone to some way replace is very similar to push but I think it works a little bit differently in how it stores the memory so for example I think 50 is your place and go back it wouldn't work the same as if you use push and go back I'm not gonna go into detail about that but I want to show you guys is if we go to match it gets params you can see Pokemon here is Bulbasaur and that's exactly what / here let's Circle for this test and we go back to props match params pokemons our test so if we go back to the row here this is what I mean when I say this is sort of like a variable it is good this can be anything alternatively if you remember I showed you guys if we did this it would not match any of them so therefore because doesn't match any of them it goes to the redirect I hope that makes sense so now let's just add in a Nerf ball so that's enough let's just add in let's say now it's linked yeah nothing's fine so now think let's call this such and all this is gonna have is a - I think goes I think this is - and slash let's just leave like this for now and test out so if I go to Pokemon like such yeah every dieters back there and alternatively I could give Pokemon slash test if I click on this it should take me to slash tests yeah so it accepts a - this is actually just an anchor tag Rafi okay and I use nav link because what nav link does is that if you're on this route then it will have this class would active on it so if you look here the class active but if I let's say I change back to the base path it's not active you can see there's no cross active on this link and so you can just use that for styling so you can it might be better for the user experience so let's just add some styling on this so I'm gonna give this let's go to these CSS gonna remove all of this I'm just gonna add in box eyes importer box and just make sure all the what if the paragraph tags have no margin and padding is just a reset now let's say nav and if you remember nav just has one anchor side versa it's just you display flex with 100% justified content flex and and then I'm gonna do have a so the anchor tag inside of it and just say margin right fifty pixels I'm also going to give this a height of like sixty pixels let's say and then just align the items so this is for vertical alignment let's say Santa so that's nice let's give this F background color let's see what could we do let's do something different mister coral and then we can make the text white so yeah I'm just gonna remove the on the line yeah that's that so this is for us to go back to your search page which I think yeah let me just change this back see this is now going to take us back to the base search page okay so what I wanna do now is actually go to the Pokemon list component now there's not much going on right now but what I wanted to do is when when the component first mounts were the page first loads I wanted to show the first page of all of the pokemons so that's actually good to the Pokemon API so if I remove the Pokemon name it actually returns a paginate it results so you kind of you don't specify the page but you can specify the per page so how many results are gang and you can specify the offset which is how you can do the pagination so let's go to let's let's let's start creating some actions so I'm gonna create a new directory actions and let's say Pokemon actions so the first action that want is to get this paginate it data so say constant actually export also exports Const get per command list and then this is gonna have dispatch okay and this dispatch is gonna be a sink so I want to accept two parameters so the page and the per page actually no we can just hard code the package it's quite simple as you guys see how I did agitation you can add it in yourself you want see if it's let's do a try/catch here so try and it's also imports Axios so we're gonna try to get some data so response equal to oh wait Axios top gets and if I just go back to this let me grab the URL I'm not gonna use template rows for this so now if we go into the documentation of this you will see if I go to pagination so you'll see that one of the things we can add if you like up here is we can change the offsets and we can also add the limit so that's the limit is basically your per page and the offset is how you can let's say you're on page two and you're showing 20 then you'd offset by 40 if that make sense so I'll show you guys how to do this so this is where I'm getting some information from that we need a limits and offset so I'm just gonna hard code the limit as 15 and then say page also another page the offsets yeah offset so we're going to calculate this from the page so what we can do and this is going to be equal to offsets so offset is going to be equal to the page alt applied by per page which we hotplate here is 15 we should probably just do age 15 and then just do that instead so yeah so we can whoops misuk per page subtract per page so there might be a bit confusing so here's the rationale behind this so if you're on page one you offset zero Furion on page two we also have 15 if you're on page three it also be 30 so here you can see there's you can't really see any correlation here you can see what we're doing is and this is a good example so 3 with x and 15 by 3 multiplying and subtracting 15 so B 3 times 15 a multiplied with subtract 15 and I've equal 30 so we get 2 times 15 what subtract 15 is equal to 15 and then 1 times 15 minus 15 is equal to 0 so that's how we're going to get the offset so it's just some simple maths for that okay so now the sound will he catch we actually aren't dispatching to us to do that so dispatch say type is Pokemon list loading and then here what we're going to do is a Pokemon list this is the success one sort of success this is gonna have a payload which we can just say payload response that data and if this final one who can say pokemon with a fail so that should be pretty simple and yeah so I go of this in in more detail in this other video have so I'll put a link to that but yeah this should all be working now let's now add in the reducer for this so I'm gonna say pokemon this reducer let's create some default state so we just can have loading as false actually yeah we'll leave rating as false we'll say it data is an empty array and then we'll say I think that's it for now yep that should be fine and then we're going to say Const Pokemon list reducer so we're going to get these states and the action from this and for now actually we can do the search statement now so switch based off the action type suddently default where we're just gonna return defaults maritime States as a state is equal to default state it's also make sure to export this upper command s reduce I guess now that's add in all three cases so case one is the loading so I'm just going to return the states so I'm going to spread it into create copy some way to return the states I'm going to set loading loading to true I guess that's that one you can just copy and paste this so the next one is loading to fail we'll do that one and I'll say false well we should also add in error message this is going to be an empty string I say error message is unable to get that one and then for this one we're going to say loading is false again but also going to want to add in our data so I say data is action drop payload and I think that's what we don't have to spread this because we're not gonna be mutating it so accessing it by points of or by reference is better we don't need to create a copy of this oh and I just realized this is so this should be success like it's not a just double check my action I have poked my list I mean loading success fuel loading fail success market that's fine and also I'm just gonna set the error message to be empty and I think I should the same for this okay so now we're handling this let's add this into our root producer so I say oh come on that list is Pokemon less reducer let's then go to a Pokemon this component here let's see this patch is equal to use dispatch so import that from react Redux and then when I say Pokemon the list is equal to use selector which is also imported from react Redux where we get these states and then I want state dot that's right pokemon list so just gonna return everything now what I want to do let's say I think let's remove this and we want to show so we either want to show loading and error what the data so let's put the way I generally like to do this is I just create function so show the data so I'm going to do if Pokemon list dot data and this is why I go - because I I can check if it's empty so you put the - from low - so I can do a check here so I do the last row is empty so if Pokemon list all data is empty I mean if it's not empty and I just want to return the data so I just say for now I'm just gonna return half data will map through an extra properly later so yeah if we so if we don't have data this next check if it's loading so if Pokemon list or loading this one's a billion so I think it should be up there yeah sounds billion so that's fine we can just leave like this so if it's loading return loading and if it's if there's an error actually yeah actually so if there's an error so if Pokemon list arrow error message is not equal to an empty string if you remember by default and here we said to an empty string then here we're just checking if it's not an empty string then we want to return this error whatever is so and we know we only said to one thing here we only said to you unable to get Pokemon but if you have better and better more descriptive error messages from your API then you could easily put that there and just add it to the action and just access it through there so let's do show data and remember to cool that so now if we go into our project it and we reload it and we go to the base path so we're currently not showing anything and oh that's because we're dispatching anything and then we just return actually leaving this undefined actually no no for now what we'll do is if it's not empty if it's not loading and if there's an error message then we just return or an error message or an error message trader unable to get data maybe it's let's do a react or use effect because we want this to run on the Capone amounts and this creates a function and I'm creating it's a function right now so I'll show you I mean so fetch data all this is gonna do is dispatch gets Pokemon list so make sure to import that from your actions I know I can't just put this directly in here oh and also remember to call it let's say page one but I reopen ease of pagination so I'm gonna put it like then when entry like this for now so later on it's easy I'm just gonna say fetch data page 1 so now if we come here we get loading and then have data oh and I also just realized remember to add then a empty array of dependencies so this only runs on the component mounts so now yeah we have data Oh let's still let's just restart that so localhost yeah so we have data so now let's actually show some of that data so what we can do is I'm going to put template the tours here so let's first show the sprite so say let's call this um actually this is the individual one so what we're gonna do is just show the rope so let's see what data we actually get back first so if I go back if I open this well we get is the name and the URL and in the URL they actually give us ID not going to use that because I know we can always just use the name instead of ID here so yeah well I really want to show us the name so let's do we can I just change this to a Norwegian what we do is return Pokemon s dot theta dot map and there we get element you return to div slide this div we'd have a paragraph tag with our dot name does the Pokemon name and I'm also gonna have one which let's just say yes leave it like this it's just added on click or actually no let's let's go and grab a link so this is going to be from reactor out to dump sir link from react Rotterdam and so what we want to do is when we click on this I'm going to redirect to the other page so we see your link to and the C's template literals so it's gonna be slash oh come on slash and then the name so our dot name let's just say view so they don't have any styling on this and for some reason oh that is because I just remembered that here payload is actually has a couple of things doesn't just have that so what we have to do is just make some slight adjustments just say counts if we look at the API here we get counts and then we get results so that's that's what it's actually under so say counts sits there are initially and let's do so data is that going to be action or payoff results and then let's also set count to action dot payload dollar counts so now you can see we are we have all of these here and when we click on it we actually go to the link so that's working let's just do a little bit of styling now so let's first let me just put this here let's give this a class so of pokemon item and this should probably be inside of a bigger one so let's say list rapper and then we just within this rapper we have although it's still the same but we just wrap in a div now then what we're going to do is this to wrap up we want to so let's give this a width of 90 percent and a margin of auto let's then to this rapper think we can just do whether I call this this is Pokemon item dot Pokemon item I can just get the same margin of 10 picks or 0 so this is 10 pixel top and bottom and none to the side I'm gonna do it display flex with 100% I'm going to do you justify content space between so there are an opposite ends so yeah just like that let's give a Buddha one pixel solid let's do coral and there's actually two pixels and let's say border radius let's just say 7 pixels and it's also finally adding some padding just the 10 pixel padding say that's how we have all of these now and it will my sit it out just can also change these anchor tags here so list wrapper all of the anchor tags inside of here I'm just gonna set the color to black and then text-decoration:none so yeah that's fine oh okay so when we leave pagination to the end instead next we're going to do is populate the data that we would get here so the stuff with the action for that so this is the cat Pokemon list but now I want to do is I just get Pokemon so it's the individual Pokemon we're going to accept the Pokemon name so it's going to be a string will say a sink dispatch and we're gonna do something very similar to this I'm just gonna copy and paste it except it's gonna come on multiple and there's a reason this is a multiple because we're actually gonna want to store the data that we get so that lets say let's say I go to pikachu first and then I go to Bulbasaur and when I go back to Pikachu we already made the request for that data so we can do is just store and Redux and just grab it there and in the background do an update to get that new data if it's been updated so there might be a little bit high level and I say like this but I'll show you guys why me so we have our dispatches here I'm just gonna remove this we don't need pagination for this I'm gonna say is slash Pokemon so we're gonna remove all the pagination stuff so then we have the action payload and we also here now we want the Pokemon name so this is so we know when we're getting the data again but like let's say we first got the date of Pikachu we want a name to assign it to so let's do Pokemon name is just black one so this one we get up here because that's the basic action for this quite simple is very similar to the first one we try so and I'll try what try block we try we dispatch the loading try and get the data if it fails we dispatch fail if it succeeds we send the data in the payload and we also send the Pokemon name okay so now let's do the reducer for this one so this one is going to be a little bit different just say Pokemon multiple reducer so let's create some state some default state we want loading we want data and I'm not gonna set data to be an object nor an array and I'll show you guys why that is just in the moment we also want our message to be an empty string and I think that's it for the start so let's next create the actual reducers of Pokemon multiple reducer where we get the states I'm going to default that to the default state and the action so we're going to do a switch statement based off the action type let's do the default one which is just going to be returning state and then let's do the first case so it's pokemon multiple loading well we're just going to return state so let's spread that in it's kind of set loading to true and then error message to an empty string so I probably I don't think I explained why we set our message to an empty string even though it's loading no error what was success the reason for this is let's say we go to a pokemon that doesn't exist so we get an error so then this would be populated but then let's say I now go to one that does exist this error message should still be populated and depending on the order that you that you render this it could still show that error message but instead by showing by saying it's empty and loading what you do is because this this runs on the compiler mounts it straight we're gonna be sad empty so instead it's just gonna show loading so I hope that makes sense well though you can completely not have to do this if in your in your show data state like you see here we actually check if it's loading first before it's checked the error message if this was the other way around it would show the error message so this isn't absolutely necessary but I do want to store idea let's next add in the other two cases so let's do the fable and the fair one we just going to set it in to false and unable to find Pokemon as the error message another success one what we're going to do is we're going to set loading to false let's do that first we're also going to know and then set error message to empty well is it going to change data so we're not going to overwrite data we're going to overwrite part of data so data is an object and you have to remember that even nested objects within objects don't get copied if even though you do a spread and a higher-up object so that might sound strange what I mean is when we copy stay here we do copy all of this but this object right here is still reference it's not actually a copy so you need to then do another copy of this there are tools to create deep copies but I think that's overkill we don't really need that right now what we have to do is just create a copy of this so I'm going to do state data so this way we create a deep copy of our state and we create deep copy for a copy of our data so yeah that's that then I'm gonna say Pokemon name so square brackets because this is a variable so action dots Pokemon name this is going to be equal to action don't pay that so the reason we have it like this is because let's say go to Pikachu then data so as it would look something like this so it will be Pikachu and then I would have pictures data here right like abilities and all of that and then let's say we next go to Bulbasaur I think the size fella then this one would have its own set of abilities but now let's say we go back to Pikachu well normally you have to refresh the data because you would have overwritten it but here we actually still have it and all this gender is going to show this data straight away so we don't need a loader so it's better for the user experience and in the background this is still gonna run and it's still gonna overwrite this at the end so that way is going to show you the most recent data but it's not gonna throw a loader because we've cached some of the old response so that is the reason for this why we're spreading in states and instead using the Pokemon name and setting the data that we get from the API to Pokemon name instead of overwriting data and its entirety I guess I think that should be it for this over there miss a thing let's now go to Pokemon Pokemon and let's test this out so dispatch it is going to be able to use dispatch and let's say state is going to this a Pokemon States is going to be equal to use selector and then here we're going to get States and we'll all state dots I think it was we have to actually add the same so I say come on let's just go to some Pokemon and it's gonna be Pokemon multiple Pokemon reducer so now back in our Pokemon component you can just stay at Pokemon and yeah that's what we want I'm also just gonna do it's a Pokemon name is equal to prop starts I think it was match doctor and stop Pokemon I'm just test that out so crossover that hmm I think we imported this so let's go here let's make sure to export defaults our reducer and then here let's imports the reducer now hopefully yep so here okay looking Bulbasaur thank you so we're done with the reduce if we can close that one out we can also close our index I which should be done with these two so we can close our reduces and the actions as well so now let's go to Pokemon and let's say we act I use effect whatever to be a empty array of dependencies we're gonna dispatch get Pokemon where the Pokemon is just gonna be Pokemon name so if you remember this I prop stop matched up Rams its from the URL over Kelly Pokemon so I just add that to a constant for just ease of use so this was this would be for example Bulbasaur picture and we're just putting that into here so get Pokemon and then we get it here and then we can put it into the API to get the data for the relevant Pokemon let's just leave it like that for now and let's go to redux dev tools and let's open up our state a Pokemon oh you can see we have purpose over here now let's say I go to another one you can see we have that ones data here and then if I go back to focus or you can see that all that happens is that this gets overwritten okay you don't actually see it because the taste is the same okay so now let's actually show some of that data so I'm just gonna say h1 tag here and just give this Pokemon name let's also create some a function called show data where we're gonna if the Pokemon states so DoCoMo states top data and then the Pokemon name so just to explain what i'm doing here i'm going pokemon state so as this data and then name so Bob so for example so I'm just checking if that one is empty so this is a little - for this so I'm actually going to check if this is not empty then I want to return have data just for now if a Pokemon State thought loading so if it's loading than I wanna return loading and if the Pokemon States thought error message is not an empty string and I just want to return that error message but then finally if for some reason are there's a happening which I can't actually think of a case where at least one of these won't be true but Bridget miles bit is here error getting Pokemon now let's also remember to add the sensor show data and call it so cannot read data of undefined so if some reason Pokemon state is undefined let's just do a console love to see why that is it might be the name of the Ruby juicer oh yeah so here I use the capital P but here I'm using a lowercase P so if I do this and save yeah because you have data if I look at the data this is just a redox tape say we have all of this okay that's nice so that's next just identity it's just actually show some of the dates properly so it's great Dave oh come on rapper let's first show let's say item and then it's first sure these sprites and I know that there are a couple of sprites on the Pokemon so you also just do this say poke mutator is equal to this is just for ease of use yeah so we have that data directly we don't have to keep reference and get through pokemon state data we just we can use it straight away from this variable so the sprites let's do the image tag where the source is equal to pokemon data those sprites dot front default so I know that's one of them and it's just test out so yep that's there and that's what sprites wrong my new there's a couple other ones so I know there's frontier folds there's back defaults there's front shiny and I think there's back shiny say that's all of them I know not all of the pokémon will have this his I mean by that I think if I go to this no place has it but I think some of them don't actually have images so just keep that mind you might want to do some sort of check if you should actually show the image fifth because this could be no so yeah it's fine for this let's create another div let's show the stats here and these stats if I remember correctly on an array so stats are a base that's that name HP okay so we can just do coke data dot stats dot map let's say elements and then just going to return a paragraph tag and say L dot stat dot name and our thoughts that talk based I think it was thanked it's missing the base stat so it's just oh because it's not yeah CS now we have the base stats and then let's also add in just some abilities so I know ability is very similar its its ability to the top yes it has slots so we just take a name and I think there any of this is too interesting so yeah we just takes the name packet so we have all of this let's just do some quick CSS styling so let's say it has a weight of 90% and a margin of water so that but it gives some spacing on the sides let's say what did we call this so this is called pokemon rifle let's give this a width of 100% that has also give this a display of sex and I think we should do you justify content for a space between then for each one I think we give it a item so let's do Pokemon wrapper so item and then in here we can do we can just give a width of 30% so hopefully it should be some spacing between them looks okay obviously could be better but I'm just trying to get the functionality across to you guys not lost I think so now we just need to add in two more things a search bar and some pagination so for the pagination we're actually going to be using this component here so let's start by installing that and yep so whoops so copy this command let's go to terminal let's stop this and run the command so just NPM is store react paginate so while that's installing in the background we can actually do these such because the search is pretty simple let's go to the Pokemon this component and let's just add in a search bar pair so as to create div such wrapper and this is just gonna have let's say a paragraph tag such that's also a dinner input and that's also at that of button now let's create some state just to handle the search to search and set such is equal to use state and initially I just want it to be an empty snap this drink and I'm gonna say office researcher and I'm gonna say unchanged set search to the event target value and then when we click this I'm gonna do is say on click I'm just going to I'm going to do props so scrap props it I'm gonna do prompts dot history I think it was doctor Sh and so this is from the reactor out Saddam package so hip pushes is going to push them so go to like navigate to whatever directories here so which these template literals so it's gonna be slash Pokemon the slash and then such so this is from states it's also adding a little bit of styling for this search-wrapper all I'm gonna do is just display flex with 100% justify contents enter a line item sensor I think that should be fine oh we stopped our server so let's start that back up say we have these such it and just give it some margin because this so margin let's do 20 pixels zero and now let's test our self right you Pikachu and I hit such I go to slash / comment / picture and there's the data when I kept our mouths so that's nice so now let's add in the pagination at the bottom so if we go to Pokemon I want to add it actually sorry not poke on Pokemon list I want this to be at the bottom of the page and only to show if we have data so I'm just gonna copy this and then so if this is not empty then what I want to do is I just show that pagination so the way that we use it is first as import reacts paginates from reacts paginates and then let's do react paginate here now it's going to take some props and I think it tells us the required prop so we need the page count so the number of pages we need the page range display which is I think how many pages the show and the number of pages to display for margins so that's just like on the left and right it's let's see on page five and if you want to show page six and page four on the left and right so let's start with the page count so this is going to be so for this we have to actually calculate it so we know we have Pokemon list which is Pokemon estate and this actually contains count so the total number of herbs sorry total number of items elements you can say now if we go to all actions if you remember we hard-coded per page to 15 so if you are not cutting this you might want to have it here but I'm just gonna leave a hard-coded it is pretty simple to change let's go back to Pokemon list now the per page is it going to be equal to the total number of results divided by so the count divided by our per page and then round it up because it could be a decimal so let's do that now so it's gonna be math.ceil so this rounds up and the number that we run around up is the so it is going to be the Pokemon list yeah Pokemon lists dots counts divided by 15 I don't know 15 because we heart code there so that yeah so hey there's obviously not styling but you can see we do get with the pages and for my own testing I know there is actually 65 pages so that's working nice next up let's do the other two so we have page range display I think I'm just going to set this to two and the page the margin pages displayed and I'm also going to set that to two so hopefully now it looks a little bit so I go to this page oh so I think if I set this to one okay so this one when I set two and this one when I set to one so the page the page range displayed to that is full was on the left and right of these so you can see we have one oops we have four and six and here on the ends we only have one and that's because he said margin page is displayed the one further two changes to 2 we would have so if I go down a bit yes you would have one and to 64 and 65 so I'm just gonna leave as this only thing that's left is to actually update this I'll do the styling at the end so to update this we have a function on page change and I'm just gonna so I know it gives you data and data dot selects it I think so if I the console log data thought selected and we go back here open our dev tools so I click on this we get 64 not sure why it does this it always does one page this so so if I click 62 now it does 61 I think it's accounts page 1 is 0 as the reason why so I'm just gonna add 1 to it so all I'm gonna do is cool this function so fetch data fetch data so instead of this I'm going to go fetch data with the page best that just add 1 to it because my implementation is slightly different to I think there's is so now if I click 3 and you can see the data is changing the loading state is not changing though and I think others because we actually check that first so let's do this instead say we get it's very short but what we do actually get loading just quick note on this if we go to the Pokemon component here I would say that implementing it in this way where we first check if we have any data and then if we do just showing it even if it's not the most up-to-date I think this is acceptable and as I something you should do but here when you're showing paginating results and January from pagination their loading times will probably take longer so I would actually recommend show and get loading and not learning it from from cache unless you have all of the pageant native results in cache now that is something I recommend there's not something I want to do for this video and say that's that it's now just finish off by just styling this a bit so I think this doesn't have a cross name I think container a class name let's set this so let's just check this yeah pagination I guess let's just do some styling on that so let's do a display of flex let's give this a width of let's just give this a max weight actually sorry let's just give this up with 500 pixels I think that's fine let's do a margin of auto let's also say list-style:none let's say padding:0 see how that looks now they're all very placed together so to fix I finished a justified content space between so yeah now we have the pagination working and this go to page 65 so here's the reason why we round up so if we were to look at this here the count is 964 so 964 divided by 15 actually gives 64 point two so this Browns up to 65 if we didn't do this these records here would be missed so that's the reason why you round up see I hope you guys enjoyed this video and it's a pretty long video I don't know if you guys liked the style of video will feel like more shorter ones but I think this one kind of helps especially with beginners just understanding sort of how you want to approach things and react and I also know that I use a couple of different packages here and how they work together so we use Redux along with the redox tank we used the reactor altar we also just used a fairly I'm guessing this is a very small package just for pagination so I just want to show you guys also how to integrate packages together I don't normally I mean show just individual packages like just Redux or just react or awesome but I think this is a nice way to put everything together and create a very small very ugly looking project I say I hope you guys enjoy the video thanks for watching if you have any criticisms let me know in the comments below if you enjoyed it I would also appreciate a comment so yeah thanks for watching [Music]

Channel: LetsCode

Views: 15,684

Rating: 4.9302325 out of 5

Keywords: javascript, react, react.js, react js, redux, react-redux, react redux, react hooks, react-hooks, react-router-dom, react-router, react router dom, react router, js, pokeapi, poke api, pokemon-api, pokemon api

Id: GbAENvrGbDo

Length: 62min 39sec (3759 seconds)

Published: Thu Jun 25 2020