Next.js 13 Redux Toolkit Tutorial

in this video we're going to learn how to use Redux toolkit in the new Next js13 app directory there's not really any documentation for this out there you're going to have to do things a little differently than you're used to doing it one of the first differences you'll notice is there's an app folder already created for you the normal naming convention is to create an app folder for the Redux store and features but that can be a little bit confusing since there's already an app directory so you can name it whatever you want but I'm just going to name it Global Redux this is where I'm going to house all my Redux related things for the global State Management within the global Redux file you'll need to create a store.ts file a provider.tsx file both of these are going to be needed to get Redux toolkit to work within next 13. I'll explain more why in a second it all has to do with the fact that next 13 has decided to kind of go all in with this server-side component angle they're wanting to push everybody into server-side components by default whereas things like Redux toolkit and context API those live on the client side so you kind of have to do a lot of different things another one of the differences that you have to do is have this new file called provider.tsx and to create the basic example that Redux has on their quick start guide which is a counter an incrementer or decrementer let's go ahead and within here create something called features a features folder within the features folder we'll create a counter folder and within the counter folder we'll create a counter slice dot TS file we'll go through each of these one at a time the first file we'll create is the store a really important thing to remember is at the top of each of these Pages you always need to say use client in quote boots with a semicolon at the end with next 13 in the app directory everything is a server side component by default so you have to put this used client at the top of the screen to let next 13 know that this is meant to be a client-side component it has to be a client-side component for Redux toolkit to work Redux toolkit will not work on a server side component so just make sure to put use client and just so we don't forget I'm going to go ahead and copy this and paste it also in the provider and in the counter slice now let's go back to the store go ahead and import the configure store like you normally would from at Redux toolkit and it looks like I forgot to install Redux toolkit so let's go ahead and do that real fast I'm going to say npm install Redux toolkit and I'm also going to say react Redux go ahead and install that it looks like I might need to say npm install actually spell out the word okay I left out the letter L let's try that again go back to toolkit put in an L right there that should work all right that works let's go on to the next one we'll go ahead and import this we'll create this in a second but we'll import a counter reducer from our features so go to the features file slash counter slash counter slice under this we'll say export const store equals configure store within there we'll add our reducer and within there we'll say counter and make the value be this counter reducer which we will create in a moment under there we'll export type root State equals return type we'll say type of store dot get State and if vs code creates that for you you can delete that after that we'll say export type app dispatch equals type of store dot dispatch all right and it looks like we're done with the store file let's go ahead and go to the provider file now let me go ahead and explain what's going on here why we need a separate provider file so normally in a normal react app you would put the provider around like the app maybe the index.app the index.jsfile.app well in next 13 their version of that is layout if you come to this layout page it's sort of like what the old index.tsx file or index.js file would be where there would maybe be an app year Well normally you would put the provider directly right here something like this and I'll just show you what you would normally do normally you do this and say store equals store the problem is though remember with next 13 everything is a server side component by default so since this layout component is a server side component this will not actually work because Redux toolkit has to live on on the client side so everything has to be on the client side including the provider so the way you can fix that is by creating a client-side provider file and we'll create the provider in this file so we'll go ahead and say import Provider from react Dash Redux then we'll import the store that we just created say from dot slash store and beneath this we'll say export function providers and it's important you put an S at the end because if you just say provider it's going to be the same name as the react Redux it'll have conflicting issues so add an S to the end of this to get rid of the conflicting issues within here put an object and type children it's going to give you a bit of an error right here because it's implicitly a type of any but you can just ignore that say return and here is where you would put the provider and the store store value and then within this put curly braces with Children Here what this is going to represent is all the child components which is just another way of saying all the pages and so when we come over here to our layout what this is doing is this children object is taking in all the the pages within this app directory and so now that this provider file has been created and it is on the client side now we can successfully import it into this layout file and it won't break anything it'll work so let's go ahead and come up here we'll say import and we'll say providers with an s from and then we'll link to our Global Redux slash provider and now we can go ahead and put the providers here just say providers and put the children inside of it so now all the pages in this app will have access to This Global Redux provider now let's go ahead and create this counter slice functionality and just again to reiterate always make sure to put use client at the top of the screen or this won't work say import create slice from we'll say Redux JS slash toolkit and since we're using typescript in this project we'll say export interface counter State and within here we'll just say value number then we'll say const initial State counter State equals value with the default of zero under that we'll say export const counter slice equals create slice and within here we'll give it a name of counter we'll just say initial state which takes this value here and we'll go ahead and create our reducers the first function is going to be increment we'll say State as a parameter and for this we'll just say state DOT Value Plus equals one then we'll say decrement state state DOT value minus equals one and then increment by amount we'll take in two parameters here we'll say State and action and the value of this will say state DOT Value Plus equals action dot payload under the counter slice we'll say export const increment decrement and increment by amount equals counterslice dot actions and finally we'll say export default counter slice dot reducer all right and now our uh Redux toolkit is completely set up so just to reiterate how you would do this just to explain one more time you'll have to set up things a little bit differently though there's no documentation on this and so this is just what made sense for me so I decided for the globe Global Redux State I went ahead and just created a global Redux folder I created a store file a provider file and then a features folder that contains all of our slice functions I made sure to do everything on the client side and then at the end I finally imported this new providers with an S at the end that we created in the provider file and wrapped that around the children and then everything works properly so let's now go ahead and go into our page file we'll go ahead and use what we created in this file to create a counter function so I'm going to delete all of this that comes on the Page by default just leave the main div delete all this up here except for the Styles We'll add some Styles in a second the very first thing again before you move on to remember is this has to be a client-side component or Redux will not work so make sure to say use client at the top now let's import the tie type root state from the global Redux store next we'll import the use selector and the use dispatch from react Redux then we'll import increment decrement and increment by amount from the features counter counter slice within the home function we'll say const count equals use selector and within that function we'll say state with root State as the type Arrow function state DOT counter dot value since that's the name that we gave it was counter under that we'll say const dispatch equals use dispatch and now we're ready to use these values within this page so let's just go ahead and create a button with a class name curly braces Styles dot button and we'll add these Styles in just a moment we'll say and let's actually make it look like this we'll say increment for this and on this button we'll give it an on click event and in this on click event we'll say dispatch and we'll use this increment function that we created and I'm just going to copy this whole button first I'm going to say span and curly braces count here to track our count and then I'll paste the button there I'll change the word to decrement and I'll change the function to decrement and then I'll add one more button I'll change the words to say increment by two and I'll change the function to say increment by amount and the value in here I'm just going to put the value 2 so that it'll increment by two all right and I think we're ready to see what this looks like so let's say npm run Dev and I'm going to open this up on localhost 3000 looks like I import I had the wrong path for one of my imports oh and I forgot to put the L there that was the problem all right let's refresh let me try to restart start my server npm run Dev open backup localhost 3000 all right it looks like I had another typo I didn't say counter Slice on the page actually it's in the counter slice there it is I was missing a u all right there that is it looks like it's working and I won't go through the styling I have this code in the description below you can see the styling there but there now we can see our counter is here let's see if it works and the increment is working correctly decrement is working correctly increment by two is working correctly so it looks like everything is working correctly and that is how you use Redux toolkit in next 13. let me know in the comments below do you like this change with next 13 I'm gonna have to be honest the more I try to use next 13. the more I'm starting to kind of think maybe they took one step forward and two steps back I'm not so sure that I like it I'm considering making a rant video about it to rant about all the new features with app the app directory that I don't really like if you would like to see a rant video like that please let me know in the comments below and again let me know your opinions about next 13 in the comments below like the video if you'd like to see more content like this don't forget to subscribe and hit the Bell icon thanks for watching and I'll see you next time

Channel: Native Notify

Views: 51,589

Keywords: next.js 13, nextjs 13, next js 13, next.js, next js, js, redux, toolkit, redux toolkit

Id: Onekwb2l9zg

Length: 13min 21sec (801 seconds)

Published: Sat Feb 18 2023