How to add Redux to ANY Next.js app in 15 minutes (For Beginners)

what is going on guys welcome back to another video in today's video i'm gonna show you how to add redux into any nexujs app this is also gonna work for basic react apps as well let's jump into it [Music] what's going on guys before we jump into this tutorial this video was made possible by our amazing friends over at skillshare if you want one month completely free trial of skillshare check this out skillshare is an online learning community where millions of people come together to take the next step in their creative journey the thing i love about skillshare is that there are no ads they're always launching new premium classes and they also recommend really interesting classes so before you know it i'm actually no longer watching tv or netflix all i do is watch skillshare while i'm actually eating my food most classes are under 60 minutes so they should be able to fit any schedule whether you're super busy or you've got a little bit more time on your hands i've actually gone ahead and dropped the react basics 101 entire class on skillshare the first 1000 people to use the link in the description are going to get a free month worth of premium skillshare and you're going to be able to with that access the react basics which i've uploaded on top of that you're going to get access to thousands and thousands of courses available on skillshare's platform i've actually been checking out a amazing video editing class at the moment by ali abdel where i was actually able to find out how i could use my ipad to add animated handwriting into my videos to level up my production value and now i'm making the best use out of my ipad as well as leveling up my final cut production game so this is just an example of the amazing value that i've got since i've signed up with skillshare and if you guys want to go ahead and benefit from this just like i have then go ahead and remember the first 1000 people to go ahead and grab that link are gonna get one free month of skillshare premium which means that you can access my react basics 101 class it's completely free you have nothing to lose and then after that you can go ahead and continue if you're enjoying what you see on skillshare so let's jump straight into the tutorial so the first thing you want to do is go ahead and run the following command mpx create next app now i'm going to be setting up with tailwind css so i'm using the template with 101 css so let's go ahead and enter in the meantime i want you to head over to the following link on the screen this will take you to the redox toolkit quick start guide once our app is initialized all we need to do is cd into the app that app right there and then we're going to go ahead and type in code dot to open up our code repo so now you're going to see a starter template for an xjs app we're going to click on pages and head over to index.tsx this is the first page that you're going to see when you load up your app on the home page but it's not actually the starting point for the app so we're going to head over to underscoreapp.tsx this is actually the starting point for your application and it's where all your components are going to get loaded from so the first step to adding redux into our application is to do the following installation npm install redux js toolkit and react redux now i'm actually using yarn if you're not sure if you're using yarn or npm if you have a yarn.log file you'll need to use yarn if you have a package lock file you're going to be using npm so in this case if you're using npm simply follow this command if you're using yarn follow the command i'm about to show you right now it's going to be yarn add on add redux js toolkit react redux once that's installed command j to hide the terminal now the first thing to notice is that if you were to do this in javascript fairly simple installation instructions i'm going to show you in typescript so that way you can be fully informed and see how you can do both so the first step that you want to do is go ahead and create the store file now as we're using typescript it's going to be store.ts not js so they need to update that on their website let's go ahead and create a new file called store.ts now once we've got this open we can go ahead and copy this snippet inside of our code the first top half is basically going ahead and configuring that global data layer around our application the second part is actually the typescript definitions needed to go ahead and infer the different types that are going to exist inside of that global data layer so we're going to use these later on but save the file and we can proceed to step two now the next step is to actually wrap our entire app inside of this redux provider so what we're now going to do is do two import statements inside of our underscoreapp.ts folder so heading over to underscore app.tsx you'll see that our layout looks a little bit different from their example this is because they're using a react app whereas we're using a next js app it's fairly straightforward and i'm going to show you how to go ahead and get this working so firstly we need to fix this and make sure that we're actually in pulling in the file from the correct directory so in this case i need to import store from one level up which is actually just going to be dot dot forward slash store the second one is going to be the provider from a react redux which can stay the same now as you can see in their example they're simply wrapping the entire app inside of a provider now in order to do the same thing here all we need to do so the first thing to do here to make it very simple it doesn't matter how many different higher order components you have here all you want to do is surround your app inside of parentheses drop it down a line and simply pop in the provider like so and you want to close this up like so it's as simple as that to go ahead and surround your app with the react redux provider now think of it this way so your entire app is going to get loaded within this provider which means it can use all of the benefits of redux inside or below that point in the tree the next step is to simply create our first redux slice now in this case we're going to build a dummy counter app so we're actually going to create something called a counter slice and we're going to do a slightly different layout to what they have here so what i'm going to do is i'm going to have a top layup folder so i'm going to click on package.json create a new photo called slices inside of here i'm going to have a slice called the counter slice and this is going to be responsible for holding all of the counter information inside of my app but at a global data layer level so what i'm going to do here is i'm going to copy the example and we're going to repurpose this to our use case so i'm going to explain briefly what this means the first thing we're doing is creating a typescript definition this is because we need to define what this initial state looks like so as you can see we've got this object here called initial state which has the following a value inside of it which is of type number and as you can see we can tell that it's of type number because it has the counter state interface okay so in this case you could use a type you could use the interface it's up to preference here but as you can see we're defining that the value is of type number so in this case we need to go ahead and proceed we're going to use this handy create slice function from a redux toolkit which is simply used by providing a few different parameters inside of the object the first thing that we need to do is go ahead and give it a name so in this case counter slice seems suitable if we had information about the basket for example this would be the basket slice if it was the user it would be the user slice and so forth the second argument is the initial state and the third argument is the reducers the reducers are known as the actions now think of these as the functions which we're going to go ahead and call inside of our code which is then going to allow us to manipulate the values located in these different slices at that global data layer so the first one is the increment now i'm going to go ahead and remove this you can look at that in more detail if you're interested but let's take a quick peek as to what's going on here the first one is increment and what we're doing here is we're simply incrementing the state value so in this case the global state value by a value of one and the decrement is doing the opposite minusing by one and as you can see we can also have more complicated arguments or more complicated functions which can manipulate the state by an action payload which we are going to go ahead and pass through when we call this function so as you can see this one takes a special type which is every typescript definition pulled by the redux shares toolkit and the argument type here is a number because the value that you would want to increment by would most likely be a number that we're going to go ahead and pass to the function in this case we're not going to use the increment by amount we're going to go ahead and get rid of that over here now here you can see we've got action creators being generated this is simply basically going ahead and allowing us to call these functions outside of this counter slice hence why we're exporting these two different functions from the actions that we've described above okay and then finally we need to export this counter slice reducer so that way we can connect it to the store so the next step is that we need to go ahead and actually import it into our store so here i'm importing the reducer that we created for the counter slice and we're going to go ahead and actually connect it to our store right here so the next thing we're going to do is basically go ahead and give it the the name that we've essentially given inside the counter size is the name that we want to give the key over here and then we've got the counter reducer being paired alongside that what this is doing is configuring redux so that way we have a counter slice which has which is being prepared with the counter reducer this is essentially a combination of the different actions inside of our counter size as well as the initial state and the current state of that global slice after we're done with that we're actually going to run our app so command j opens the terminal yarn run dev or mpm run dev to go ahead and spin up your app this is going to start your app on localhost 3000. if you see this screen you've done everything correctly i'd also highly recommend as a bonus tip that you actually install the redux dev tools to see if you actually set up your counter slice in the correct manner if you did everything correctly you should see a counter slice with a value of zero heading over to the chrome web store and installing the redux dev tools as so so how do we actually manipulate the values inside of that global store well i'm going to grab everything inside of the main and i'm actually going to go ahead and delete this i'm going to start by typing in a h1 the value of count is 0. i'm also going to simplify this by removing the footer now as you can see the value of count is a hard value of zero firstly we don't want to do this we actually want to get the value from the redux store and the way we do this is we're going to use the use selector and user dispatch methods accordingly to go ahead and pull the value from the global store and also manipulate the value by dispatching those actions that we created earlier we're also going to import those actions that we're going to end up using in a second so i'm going to go ahead and import the following or you select the use dispatch helpers from react redux and our decrement and increment actions from the counter slice that we originally sell i'm also going to go ahead and import the route state that we previously set up earlier inside of our global store this will actually give me the correct typings based on how we configured our slices so the first thing you want to do is go ahead and pop in the following we're going to create a variable called count we're going to use the use selector hook and what this is going to do it's going to give us a callback which has the type of root state now i want to show you something interesting if i type in state dot you'll now see the list of slices inside of our global redux store are shown to us and we can go ahead and click the counter and then we can click dot and you can see now i'm accessing the counters accessing the counters state so i'm going to actually go ahead and get the value to prove that this is correct we initialized it with a value of 0 inside of the slice so if i go ahead and do count hit save and i hit refresh you will see that we still have a value of zero yes it fast refreshes i just want to exaggerate that point the next thing i want to do is have two buttons one which increments one which decrements so in order to dispatch these actions i need something called the dispatch so in this case i can use the user dispatch hook to go ahead and get this this will allow me to dispatch certain actions which will go ahead and manipulate the appropriate redux slice so next up i'm going to add two different buttons an increment and a decrement button i've added some minimal styling to go ahead and give the increment a green color and they decrement a red color so as you can see now we have these nice two buttons so when i click on the increment i'm going to go ahead and attach a method to the on click function this is going to be an arrow function which is going to go ahead and dispatch the increment action for the decrement i'm going to go ahead and do the opposite so i'm going to have an arrow function which is going to dispatch the decrement action after hitting save you can see we get a nice little format and as i go ahead and hit the appropriate button so if i increment you can see the value gets updated because we're modifying the redux store and which then causes the state to change which results in an impactful state update so as you can see i can increment and i can decrement and all is working well to test it this is really working open up your inspector head to your redux tab and you should see if we hit a refresh you can now see the different actions that are getting dispatched alongside the actual effect that is having you can also click on this diff tab which shows the change in which is happening inside of the store each time you press or dispatch that action so as you can see each time i'm dispatching it it's modifying the global data layer especially in particular the value variable inside of the counter slice you can even go back in time by clicking on the jump button go ahead and undo all of the previous actions to get back and forth if you want to go ahead and debug and play around with this now a final little thing that i like to do is actually add something called a selector as you can see here this is quite a not a very clean pattern especially as our app tends to grow so i'm actually going to show you a nice little refactoring tip you don't want to tend to have your selectors like this it gets kind of messy as your app tends to grow so i want to cut this out of here head over to my counter slice and here i want to go ahead and write the following i'm going to create a select value function which is going to make use of the root state so i'm going to have to go ahead and import this from our store and then this is going to go ahead and return the state counter value now as you can see this is all neatly wrapped into this select value and then what we can do is as we're exporting this from this file i can now go ahead and say use selector select value import this from our counter size and this is a much neater approach this is an example of a selector and what you would typically do is have a selector for each different variable in that counter slice as you need it you can also have interesting selectors such as calculate the total from the basket for example or you can do more complicated things as you see fit with that said you've just gone ahead and successfully added redux to your nexus app yes it's that simple you can now go ahead and add several different slices into your app to further segregate the global data layer into useful little chunks such as the basket size of the user slice the theme slice if you had a dark or light theme for example and so forth if you found this video useful and you want to see more short sweet videos just like this one hit the thumbs up drop a comment down below and as always guys this is your boy [Music] you

Channel: Sonny Sangha

Views: 72,030

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: ss-_S1Vyxa0

Length: 15min 18sec (918 seconds)

Published: Sat Jul 23 2022