Redux and NextJS 13 Tutorial | Redux Toolkit Tutorial With Next 13

so you're wondering how can you mix next gs13 and Redux inside of a project well it's not that complicated and I made this video which will be perfect for you because I'm going to show you exactly how to do that before we get into the video if we could leave a like And subscribe I would massively appreciate it remember that the code will all be in the description as always and let's get into the video [Music] [Applause] [Music] [Applause] before we dive into today's video I want to take a moment to talk about today's sponsor skillshare skillshare is an amazing online learning platform that has literally transformed my approach to coding one thing I love about skillshare is the freedom that it gives everyone to improve individual skills that they're lacking I ended up taking this fantastic course called modern CSS writing better cleaner and more scalable cold by Harry Roberts and I remember it helped me massively with improving that specific set of skills that I was lacking and I remember it helped me massively to improve that specific set of skills which were my weak points which is CSS but maybe for you it's not about CSS maybe for you it's about something else like developing your personal branding or mastering video marketing or it doesn't have to be related to programming skillshare can be a game changer but here's the cool part it doesn't matter how advanced you are on each skill skill show will have a course tailored for you and again it's not just about CSS or coding it offers thousands of inspiring classes from everywhere from from illustration to entrepreneurship the best part of all of this is that you can basically access all this for free because skillshare is offering a one month free trial for you to explore it and learn from their incredible class library that means that you can use that one month to sharpen up your skills take a look at their platform and see if you enjoyed it like I said I've used skillshare in the past and I really enjoyed the way they approach teaching so I couldn't recommend it enough through their courses so if you're interested sign up for the free Channel I have a link in the description I really appreciate skillshare for sponsoring this video now let's get into the tutorial okay so as you can see over here I have a next GS project now this over here is a next 13 project it was installed using the create next app CLI I already have some of the code already pre-written over here but none of the code is actually Redux code I'm going to show you guys everything from scratch right I just made all of the pre like initial code in next.js so that I wouldn't spend time doing that and I would just focus on implementing Redix into a next application so the example I want to show to you guys in order to teach you guys how to implement Redux with this is something similar to this I have my home page over here right which if I go into my project it is the initial route in my next application and then I also have this component called login now if you are familiar with Redux you would understand that Redix is a state management tool and it will allow us to be able to handle our states and our functions and everything related to consumed and distributed data inside of our project in a very simple manner without having to pass data through props without having to pass different states and commonly used variables throughout props in our application so I created this example where we want to have some sort of information some sort of state that is going to represent the authentication of a user so obviously I'm not going to show full-on exam provide like authentication here what I'm going to show you guys is a very simple login component as you can see and in this login component we can just type a username for the user login click on the button for to log in and what that should do is actually set the user to be a specific user that we want to to create and with that change we should see the variable for the state of the user or the username variable changing its value as well throughout our application we're also going to add other functionalities like logging out and also having a moderator status as one of the fields in the user object now all of those is just to add more depth into the tutorial but I'll start off by just installing Redux into our project now like I said in the title and in the beginning in this video I'm going to be teaching you Redux but I'm going to be using Redux toolkit which is basically a library which is which provides you a set of tools to simplify Redux and your applications now Redux toolkit is a very commonly used Library out there I believe it is the best option to be using whenever you're coding in Redux so if it's this is the first time you're actually trying to code with Redux keep just keep in mind that uh you don't have to worry you don't have to learn how to use Redux without Redux toolkit ridic's toolkit is enough and it actually makes the experience better so I'm gonna open this up over here our terminal I'm currently running the project in this terminal as you can see but I'm going to open up another terminal inside of this so we can install our packages and obviously the first one I want to install is the um at Redux JS slash toolkit just like this now this one is going to be for the Redix toolkit package and the next one is the react Redux package just like this and those are the only two I'm going to install I'm going to press enter it installed everything we're gonna save it like this then what I want to do is I want to create a part in our project like a folder in our project that is going to hold everything related to Redux now I'm going to create it outside of this of the app folder and inside of our source folder I'm just going to call it Redux just like this and it will exist as a sibling to our app folder now over here we're going to create a bunch of things but mostly everything related to Redux so everything every slice every feature everything you create inside of Redux will go inside of this folder now the first thing I want to create is our store.ts file now this file over here it is used to basically create the the store that is going to hold all of our states and variables inside of our redex application so it is essential that we do the following we first just import and the top from Redux toolkit so I'll say from at redex.js toolkit by the way I'm using typescript so I will show you guys how to implement everything with typescript and this already comes with types so you don't have to worry about that too so what we want is the configure store function and then over here at the bottom we'll just say export const store so we'll create a variable called store and set it equal to the configure store and over here we can set a bunch of things that are related to configurations to our Redux store but the only thing I'm going to be actually setting to you guys is I will be adding some reducers to this or just one reducer in our case a reducer is basically just a function that takes in an action and the previous state of the application and then it makes some changes to that state and it returns that new value for that specific state so what do I mean by that well reducers are basically they have access to the current value of different states so different variables and it can take in as well some action which is just something that you some data that you can use to change that state and this is fundamentally important for any Redux application so right now we haven't created any reducers yet so that's what we need to do right now so to do that I'm actually going to create a folder over here inside of our Redux folder called features like this and inside of this folder we're going to create what is known as our slices so whenever you want to have different groups of variables and states that are grouped together and are you want to access in a variety of places in your app so similar to what I mean is like whenever you have a group of variables in states that you want to be passing through a bunch of components and you want to have a centralized store that is going to have access to those values without having to prop drill all of them you would create a slice for that now we were dealing with authentication right so we can create a off slice just like this so I'll just create this variable this file auth slice.ts and inside of here is where we deal with a lot of configuration first we're going to import at the top um two things we're going to import from at at reduxjs or I can type today so at redex.js we're going to import the create slice um function and also the payload action um type now again like I said we're dealing with typescript so this is why I'm importing this over here because I'm going to show you guys how to also put the types correctly so then what we want to do is we want to create our auth slice so I'm going to create a variable called um auth and set it equal to create slice just like this now over here we're going to pass in an of object and inside of this object we have to specify a couple of things about this slice first a name I'm going to call it auth then we need to pass in an object called the initial State now the initial state will be basically just an object containing the initial values of all of the states related to this slice so in this specific Slice on the authentication slice we can only store values for one one piece of data it can be a string it can be just a number it can be a Boolean or it can be an object containing all of those other options which is what we're going to do we're going to keep track of a bunch of things not just one so we're going to create this object called initial state which is going to be um it's going to contain a value property over here just to represent the value of our initial State and inside of value we're going to have first of all a variable called is off which will initialize as false because we will need to know in our app if the user is authenticated or not then a variable called username just like this which will be a string then a variable called uid and I'm again I'm not actually going to build all of this like I'm just using all of this as an example for you guys um so something that might happen in an actual app and finally I'll create a variable called is moderator just to show you guys it will also start as false so I can just pass over here the initial State and in JavaScript any typescript when you have an object with a name equal to the name of the variable you're setting it equal to you can just trade up condense it like this now one thing we need to know is that since this is typescript we do need to specify the type of this so what I want to do is I want to create over here two types one called the initial state so I'll create a type called initial state and what it will be is it will just have a single variable called value and it will be equal to the auth state type now if you're not using typescript in your next application I I would find it weird if you're not because it is extremely important to use typescript in any kind of applications in my opinion and especially with Nexus they make it extremely simple for you to integrate it but if you're not then just keep me creating these types you don't have to do that you can just set it equal like we were doing before so what we want to do is we want to create uh the auth state type so I'm going to say type auth state and then for this what we want is an ease off Boolean just like this then a username which will be a string and then a uid which will be a string and then finally it is moderator which will be a string as well and now what we do is we just set initial State over here to be as the initial State type as you can see and then the value as well we can set it as the auth state type it's giving us an error because I just realized I've set this to string instead of Boolean but you can see it is working now I want to set the reducers to this um slice like I said reducers or actual functions that take in a state and an action and returns or does some sort of change into our state so what do I mean by that well we want to have a couple functionalities like I mentioned right we want to have we want to be able to log in to logout and also to change the value of the is moderator to between true to false and false to true so those are the three things we want to do now the first thing is let's just write the function for logging out logging out is actually extremely simple because all we want to do is whenever you log out you want to erase all of the values in the origin in your state to be equal to its original value which is of the initial state so technically we just want to set it to the initial state so to create a reducer function for that we need to create a function over here called logout just like this and then over here we need to return whatever new value of the state we want to have in our case since we're logging out we're resetting all of the values to the initial state so I can actually just return initial State over here so whenever someone clicks and calls this function it will return and turn the state back into its initial value now this is the format of how a reducer looks like right it's a function and whenever you return over here whatever object you return over here will be the new value of the state which we have over here right so now we want to create the login the login is a little bit more complicated because login will take in uh the two arguments to the function something that the logout function didn't it didn't take any arguments so like I said we'll have a state uh argument and also an action argument now an action will be of type payload action that's why we import it at the top and what I want is I just want to be able to write a username over here in this input and this is the only thing we're going to send back into our um login so we can put the type over here of this function as a string because that we're just going to send back to here just a string containing the username so we can just specify it as a string now what I want to do is I want to return whenever you try to log in I'm going to return its new value for the state now its new value will contain uh obviously the value property just like it has over here but inside of that we're going to have the following keys we're going to have an is off that is now going to be true because you're logging in and not false then we're going to have a username which is now going to be equal to the action dot payload because action.payload will contain whatever we passed in as an argument to the login function inside of this component over here then finally we're going to have a uid and to be honest I just realized I has no purpose of this I'm just going to set it to whatever like whatever in a real application obviously you would generate an ID and pass it over here and then finally is moderator I'll continue making it false because again we want to talk will only make it a moderator whenever we call the is the toggle moderator function that we're going to create in a bit now what do we do with this well we have both the log out and the login things right and we're we have the state value over here but we're not really using it so we can actually just remove it like this or even keep it if we want to but we're not actually using this in our application or in this function at all so now that we have both of this I'm actually going to um implement this and show you guys how to use this in a inside of our component before coming back and creating the functionality for toggling that moderator the reason for that is because I think if I do everything at once it won't have a correct flow to the tutorial and if I come back and show you guys how to continue doing this it will reinforce the knowledge that we're gaining right now how do you actually use this elsewhere well you have to come down here at the bottom and you have to actually do something really weird which is to export all of our functions based on this auth.actions variable over here so we'll export our login and our logout function by just adding this line of code inside of our file and finally we also need to export our reducer so we'll say export default auth dot reducer just like this now we can come back over here to our store and in our top over here we'll just import the auth reducer that we just exported from our features slash auth slice file and what that means is that I can just come over here and just pass in the auth reducer as one of the reducers of our store now I'll export some types over here at the bottom the reason for that is again we're dealing with typescript and dealing with next.js typescript and Redix toolkit is actually a bit of a bit complicated because of the types so don't worry if you're not using typescript you don't have to do what I'm doing right now but if you are this is important we need to get the type specifically for this store so and we're going to because we're going to be using it elsewhere so I'm going to export a type called the root state of our application and I'm going to call the return type just like this and this type will have a type of store we're using your specific store and we're going to use the the value get State just like this then we're going to export another type down here which is going to be the app dispatch which you might know it will be used in our dispatch function which is part of Redux and we just actually want a to get the type of store dot dispatch just like this now that we have this done you might think we can start using all of this inside of our code inside of this component over here but that's actually not true here's a part that a lot of people get confused with when setting up Redux we have to pass in a provider with our store right but where are we going to put that where we're going to put that inside of our layout file and actually inside of here but to do that we do have to create a provider component that is going to handle all of that inside of our Redux folder so I'm going to create over here a provider dot TSX file and inside of this we're going to first of all this is going to be a client component which is important for you guys to understand because for you accessing stuff related to Redux it has to be in a client component remember in next.js if it's a server component you can't access stuff like browser events and react States or stuff like Redix States as well so we do have to set this as a client component and then I'm going to import this story that we just created so I'm going to say dot slash store and I'm going to import the variable then we're going to import from react Redux not even Redix Redux toolkit we're going to import from react Redix this thing called the provider and this is just going to wrap around um our actual component that we're creating we're going to export just like this export a function um let's call this Redux provider and then inside of this we're just going to return the provider wrapped around with its children so we're just going to pass in children over here and children are obviously it obviously means whatever components we wrap this Redux provider component around and we get it by props right so over here at the top we're going to have a prop uh it's going to be children and we do have to give it a value so we'll just it's type will just be children and it will be a react node so I'll say react node again this is all typescript this thing over here so if you're dealing with JavaScript no need to worry about that but you see there's a red squiggly line over here because we do have to pass in our store to this provider and that's why we actually created an another component that wraps around this provider over here so now that we'd have that done we can actually come to our layout over here and just inside of the body this is important inside of here we can just pass in our Redux provider uh component and wrap our children around with this and it automatically imported in the top of the Redix provider thing so you don't have to worry about that but now that just means that we have our code working and setup working for us to actually start using the functions that we created over here so now in our page.tsx we go to our login and if we want to access those functions all we have to do is first of all import them so I import them at the top over here I'll import from I'll go back to the beginning and grab the Redux folder and then grab the features folder and then the auth slice just like this and over here we're going to get the log out and the login functions so log out and log in now one thing is important wherever you use it right you have to make it into a client component I already made it uh pre-recording the video you see both the home and the logging components have the use client thing at the top so make sure you do that if you're running to a bug maybe you didn't do that so make sure you did um now that we have those functions if you're familiar with Redux you would know that we can't just call them directly we actually have to use something called the use dispatch hook so over here I'm going to import from um at Redux toolkit actually it's not Redux toolkit my bad it's react Redux we're going to import the use dispatch hook now they use dispatch hook allows us to grab this function called A dispatch function which can be used to dispatch functions that we have in our reducer so I'll come over here and create a dispatch variable and set it equal to the use dispatch function if you recall when we were setting up our Redix stuff over here you remember we exported this type called app dispatch and here is where we're gonna actually use it we're going to come over here and this uh use this patch if you're using typescript it will be of type app dispatch so you see I import it over here at the top the type that we used and now we can use this dispatch function so what we need is we want to whenever you log in into your application we want to first of all grab the state of whatever you're typing on that input which I already have over here I created a state called username as you can see and whenever you type on this input it should be setting that state equal to the value and we want to send that back um to our our slice because here in our login function we'll get that value and then set the username of the user equal to that so let's test out to see if that will work I'll open I'll call the dispatch function over here and then I'll call the login function just like this and pass in the username now when I click I need to pass obviously this this button over here um on click I'll pass in the on click login function now when we click on this it should actually send that information and save it in our store now how are we going to check to see if that's the correct information well I actually want to display the username of a user whenever they log in inside of our page.dsx so over here I want to have a header tag saying username is equal to something right so in order to do that we have to get the current value of the initial state or this the auth state so how do we do that well this is where we're going to be using something called a selector so we'll come over here at the top and it will import from react Redux so from react Redux we'll import something called the use selector which is another hook similar to the use dispatch and inside of here we'll just const username we're going to get the username and set it equal to the use selector hook and this use select your hook will we can just grab the state directly from here return back that state and specify what part of that state do we want to get and set equal to this variable so we want the username so in order to get that value we just say state DOT auth reducer because we have to specify which reducer we're talking about in our case we only have one right if we go to our store you'll see we only have one but we do have to specify in case we have more but we'll say authreducer dot um value because now we're accessing the state of that thing and we have a value in that dot username so that's the actual flow of it now it's saying state of object unknown and the reason for this is because they use selector you have to set some types to it if you recall and the reason for this is this having a red line is a typescript error and the reason for this is because we do have to actually set some types to the U selector what I like to do is I like to come to our store over here and I like to create another version of the use selector hook and call it something like um use app selector something like that so I'll create a version of that by just exporting const use app selector just like this and then setting equal to the use selector Hook from um from react Redux but instead we'll use the root state definition over here to make it work for us so I'll say this is a typed uh so you selector hook so typed use select your hook off type root State because we do have to specify that this is related to our store so now instead of using the use selector from react Redux we're actually going to use the use app selector that we created in a Redux store sorry about that I should have done that before I completely forgot that we have to change that but you see now it should even have autocomplete now um like if I were to delete this and I said just State and put dot you should see it's already Auto completing us like authreducer.value dot username so it seems to be working now I want to display the username value over here and it is that simple for us to get from our store you should see that now we have username but it's not actually displaying anything but because we previously set up our login functionality by using the use dispatch hook here in the login component we should see that if I type here my username to be pager attack and click login we should see the change happening over here which is great now that this is pretty much set up the next part of the tutorial is just going to be really quick and easy because uh most of the setup is already done so if you want to add more slices more functions more whatever it's actually pretty quick for example if I want to log out all I have to do is just add a Dispatch over here and call the logout function since we already set up the logout function you should see that oh I forgot I also have to pass this as a on click to the logout button just like this but since we already set up the log of uh functionality when I click on this you should see it erased the actual username and it seems to be working right now we want to add the toggle moderator status now in order to do that I actually want to have over here in our page another H1 tag which will just basically say okay if this user is a moderator it should display a message saying this user is a moderator if not it should not display any messages just to check to see if we are this value is actually working so to do that I'm gonna again get the is moderator like variable from our state so I'll just change this to is moderator and change this to uh is moderator over here as well just like this and I'll say okay if is moderator is true then I'm going to just play a message saying this user is a moderator now of course this message won't be displayed because we haven't added the functionality to turn this user into a moderator but we should do that right now now to do that we'll just come to our auth slice over here similar to what we did before and we'll just add a new function inside of this we can call something like toggle moderator and it will take in the state because we do have to access the current value of this moderator to change its value but we don't need to send anything from the components so we don't need the action over here all we want to do is we just want to change the value of the state DOT is moderator to be equal to the opposite of its current value we also have to say state.value dot is moderator actually and then set it to the opposite of what it currently is so if it is false it will become true and if it is true it will become false now you might realize that I'm not returning anything well this is because with Redux toolkit if you mutate a variable from the state just like this it will automatically return that and it will recognize this as a correct method to do so now one thing you can't do is do something like State equals to something something you can't do that you have to either return a new object with a new state or mutate the state like this so this is important because it causes a lot of confusion for a lot of people now what I want is I have our odd slice we made this toggle moderator function I want to pass this over here into our actions so we can access it elsewhere wait a total moderate or not model readers so I'll just save this now in our login over here I want to import this from here as well toggle moderator and I'll pass this and set our on click toggle so I'll say dispatch uh and then not dispatch event just dispatch and then toggle moderatory just like this and why does it say it can't oh I wrote it wrong uh actually I wrote it right I wrote it wrong before I apologize for that guys um I misspelled the word dispatch but it doesn't really matter because this is a variable that we created see but yeah I'll pass the on click toggle into our toggle moderator status button so I'll say on click toggle over here and you should see that if I log in again I'll say pay your attack we should see our username and now if I click on this we should see that it says this user is a moderator if I click again we won't be if I keep clicking we will be now the final thing you want to do is just add a little bit of use selector into the login component as well so that we only display the toggle model reader button over here at the bottom when the user is logged in because technically you shouldn't be able to toggle your moderate status if you're not even logged in right so all we have to do just as a final reinforcement of how to use the use selector is we just copy all of this over here paste it inside of this just like this and then obviously change this to is off we want to know if the user is authenticated or not we want to import uh the use app selector over here as well and we want to access the value of the is off variable then over here we're just gonna check to see if the user is authenticated or not and if it's not then we don't even want to display anything so I'll just grab this and put it directly over here and you should see that this would also work because now we're not logged in right there's no username it doesn't even show the option to toggle a moderate but if I logged in as page attack again you should see that the option appears and I can toggle between the status and I can log out as well so this is basically it for the video this is how you introduce and into Implement Redux and release toolkit into next.js13 if you like the video please leave a like down below and comment which want to see next subscribe because I'm posting twice a week and I would massively appreciate it thank you so much for watching the video and thank you skillshare for sponsoring this video they are really good platforms I've been sponsored by them for a while now and you know I only recommend products that I personally use so I'm glad to have them again as a sponsor and you guys should really check them out because it is a really nice service so with that in mind thank you for watching the video I see you guys next time [Music] [Applause] [Music] thank you [Music]

Channel: PedroTech

Views: 60,317

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, redux, redux toolkit, nextjs, nextjs 13, nextjs redux, redux nextjs, redux nextjs 13, redux next 13, next 13, nextjs redux toolkit, redux toolkit nextjs

Id: Yokjzp91A4o

Length: 34min 3sec (2043 seconds)

Published: Wed Jun 07 2023