Integrate Redux Toolkit with Next.js 13 Easily- Example with TypeScript

okay so welcome back to this channel so in this video we will discuss about that how we can integrate a Redux toolkit in our next js13 application okay so if you don't know about the text you're certain I have made a detailed video already on next.js13 if you want to watch that I will add the link in the description of this video okay so in this video we will see that how we can integrate a Redux toolkit in our next js13 application so let's first of all uh create a new uh next application here I type here npx create Dash next Dash app add latest and type here dot that will give the name of the folder to this project so you press enter here so would you like to use typescript I type here yes no and would you like to use Source directory with this project so if you use the source directory it will put your Pages directory and also the app directory which is the new directory inside the source folder so I will type here no and would you like to use the experimenter app directory I type here yes okay so the project is created successfully now let's install our packages first of all I need to install here the react Redux so type here react Redux then you have to install the Redux toolkit so type here add Redux JS slash tool kit just save let's install these packages okay so now our packages are installed successfully and we have our app directory uh right here okay so first of all you have to create our store we know that whenever you create integrate the Redux you have to create store for that and for it I create a new folder in the root with the name store and create a new file here that is store dot yes okay now in here first of all I want to make my store so I will import here the configure store from Redux toolkit and then I will simply type here export const function I call it make store okay and then uh sorry I will remove here this const and then here I will simply return the configured store in that we have to pass some options first of all we have to pass here the reducer so we will add our reducer later so in this way it will make the store now we have to Simply call this make store so I type here export const store we also exported and then I type here make store okay so now it will call this function and configure our store that contains the reducer okay and also we have to export two types here that you have to use so export um type which is the root state and then return type in that I will type here the type of this store dot get State oops get State we need here root State and also mean we have one more type for the app dispatch because you have to use also use dispatch so we have to also give the type to that so for that I type here export type app dispatch and I will discuss that again in a minute that is type of the store dot dispatch okay so this is our simplest order TS in which you have simply create a function that will configure the store we will pass a reducer later and then we will simply export the store we will explore our two types the root State and the app dispatch that we will use in a minute okay so now we have successfully created our store and now we need to create our slice so for that I create a new folder here that is called slices so if you don't know what is slice a slice is simply a Redux code uh that relates to a specific set of data or actions in our store so it is basically simply a code that specifies the actions in our store so for that I will simply close this one create a new slice here that is the user slice okay so user slice.ts so in here first of all I need to create this lies okay so I import here the create slice from the area text toolkit I will import that and then um I will simply type here const user slice um is equal to create slice and that you have to pass here some option first of all the name so name is going to be users and then I have to pass here the initial State okay so for that I have to create the initial State actually so I uh smart type here const initial state which is this one okay and I type here an empty object and then I need to create here password the reducer that I want to create so reducers I type here empty object so now on this video what I will do is I will fetch some data from a fake API I will fetch some users then I will put that users in the state and then fetch the user in our component okay so how we can do that and now for that I will use a function that is the um create async tongue which is the function from the Redux toolkit so whenever we want to perform any asynchronous task we use uh create Ace in Thang in our slice okay so uh create async slice take two parameters first of all uh the name of the uh thunk and then the Callback so for that I simply type here export const the fetch users this is the name of this tongue so fetch users and I will call create asynct and again we have to pass here two options first of all uh the name so the convention is that first of all we'll put name of this slice which is the users in this case then slash uh the tasks that you want to perform so we want to get all users and then I have to pass here callback function okay that gave us access to the thunk API and then in that I have to send the request to that API to get my data so I will use here simple fetch apis of const response is equal to a weight fetch um in the fetch I will pass here the URL okay I will put that in a minute then I will simply type here const data is equal to weight response dot Json and then I will simply return from here the data okay so in this case it will return a bunch of an array of users so in this way we can use the create async thumb again whenever we want to perform some asynchronous task number slice we use create asynthon and it is recommended in the documentation all right so now we are getting our data with the fat users now in the initial State we want an array of an empty array with the name entities so entities is going to be an empty array okay so that is NTTS now we are not going to use reducers in this video we will use something called extraorducers so extra reducers are also reduced about with some enhancements and it has more options that we can use to handle our state okay so let me show you how it can help us so so that I will simply type here after reducers the extra reducers okay so in that we will get access to the Builder okay and then in that we can basically write our code for the extra reducers so first of all we will add here Builder dot add case so we will add a case that um whenever fetch users dot fulfilled then we need to put our data in the state so we will get access to here uh the state and then the action I know that is a bit confusing but this is how it will work and then in that we have to Simply set the data in the state so we will set that state DOT entities dot push we will push here the action dot payload so we'll get our user in the action.payload so I will simply spread that here so dot dot action dot payload okay and we have to type here arguments of type any I let me put here type you can also create an interface for that I put here as any okay you simply create a slice pass in the name the initial state that contains the entities with an empty array then we pass here it users now this video we are using extra reducer so extra user is also reduced with some uh Advanced options so in that we can basically simply add the reducers for different action types here for example we check that if this fetch user dot full field this this means that the data of fetching is complete and then we simply push the data or the users in the uh state in the entities array okay in the same way we have different um here we have different action types like fulfilled or pending if you want to add some loading uh while data is being crashed we will add that also so in this way we can add different cases on different action types now you can also add here simple reducers for example if I type here increment and I will also get access to the state here then in that you can simply set the state for example I type here state um if I have here a value like this I can simply type here like state dot value um plus plus okay so whenever you dispatch this function which is the increment it will basically increase the value of the increase value of this value variable in this state so you can also add reducers like this in your State okay so we have to use here extra users so I simply remove this one because this is pretty simple I hope that you know about these reducers so now we have here um our entire code let's put here the actual URL so I will use this fake Json API and that is this slash users and I have put here limit of three for the three users let's put it here five so I will use this API assembly copy that from here go back and I put that here okay so now we simply have to dispatches fetch users that will send the request to this API get the data return the data and in the extra users we have added a case when that when these fetch users is fulfilled this means that our data fetching is completed then we'll simply push our data in the entities array in this state okay and then we also have to export here export default oops the user slice dot reducer because you have to also add that in our store so simply save this one now let's go to the store.ts and add that here so I simply type here import the user reducer import the user reducer from dot slash slices slash the user slice and um so we have to put this file in this slices like this okay so now I type here user in the state and the reducer is going to be user reducer like this Simply Save this one and now let's uh go to our component and test it out so I simply first of all we have to add the store so for that I go to the app create here a new file that is provider provider.tsx so in that I will simply import the Provider from react Redux okay and then we have to import our store that we have created so I will import the store from dot slash store slash store okay let me export here a function with the name uh let's call it providers in that we have here the children okay then I will simply type here return provider okay and we have to pass here children okay and for the value visual type here store that is going to be store okay and for its type I simply type here that children and that is going to be react dot react on node like this and now we have created here our provided in which we simply uh at the store and we will pass here the children and now we have to use this provider for that I simply go to my layout dot TSX and here I will remove this command I will simply import here the providers from dot slash provider okay so now we have Ram this uh children inside the providers so I add here providers and put the children inside that now we will pass this children inside the providers that will come here and we will wrap the children or all the application in our store like this okay so in this you can integrate our store so now we have added the providers and now let's actually test it for that I simply go to the page.tsx and let me remove here this entire code and put here a simple div tag okay I will remove this one and I think so I will move all this from here so now in here I will simply first of all type here use client because I have to use here the use effect so I also have to actually add that here in the providers dot TSX because this is also a client-side component not a server component okay and then I will simply import here the use selector from react Redux and also import here the use dispatch okay and then I need to import here the fetch users that I have created in my slice so type here fetch users from the uh user slice and then I have to import here the um they are imported to the top I will import here react then I have to use here the use effect I will import that from react okay and now let's use that first of all I type here I type here const dispatch is equal to use dispatch okay and then um I type here use effect and in here I will simply dispatch the fetch users that will fetch the user and then I will pass in here the empty array which is a dependency array okay so I have okay so argument of racing thing is not assignable to parameter of type action any and to solve that I add here the app dispatch that I have created in my store.ts so I will add that here so now it will solve the issue okay so now you have dispatched the fetch users on in the user app now I need to get the users from the state so for a decimal type here const entities and I need to use here the U selector the use like travel type here that the state and the type is going to be the root state that we have created in our store again and then here I will simply select from the state DOT user okay remember we have typed here um in the store user so you have to get the entities from the straight dot user so let me log here the entities so log entities like this and I type here hello Simply Save it now let's run our project so I type here npm run dab okay so I will close this file and go to my Chrome and I type here localhost Port 3000 so I get here hello if I go to the inspect on the console um I have here an array of five users but you can see that here we have an issue that it is adding two times here so the first you can see that one two three four five and then one two three four five and this is because the use effect is called two times so this is a default behavior when we have the react strict mode on and to avoid that what we can do is we can simply go back and here I will import here the use effect now there can be multiple ways of handling that so this is a simple one I import here use ref and then I will simply type here const user f is equal to use ref I type here false okay and I will simply type here that um if user ref dot current is equal to false then we will simply dispatch to load user and when the component unmounts you will simply type here that user ref dot current is equal to true so in this way it will run only uh use effect will run two times but when it will come to this check first time it is false so it will run this one and next time it is going to be true so it will not dispatch the user again okay so I simply save it now and now if I go back and reload this page and you can see that now we are getting only uh array of Five results with the five users okay so this this means that we are getting the users from the state okay so I will simply go back and I remove these entities from here and I will type here that if sorry entities dot map and for each user which is going to be any so I will type here this okay so in here I will simply type here uh H3 tag and I type here the user dot name and I give here the key which is going to be user dot ID okay Simply Save this one and now if I go back and to consider it we are getting here the five uh name of the users so now we are getting our data from the state and now we can also uh check the loading if you want for example if I go back to my user slice here I can also add one more case that if I copy it from here and I put that here I check that if the fetch users is dot pending this means that data is not being fetched then I will simply set here the loading so store dot loading is going to be true and we have to add here the loading in the initial state so by default loading is going to be false so I will set the loading to true and once data is fetched we will again set the loading to false okay so now I'm going to get this loading from the state so I can simply get access to here the loading and if I log here the loading Simply Save this one and now if I go back go to the inspect on the console you can see that first of all the loading is false then it become true because that is being fetched then it and then we have here loading false again so instead you can also handle the loading part and now if I go back if I put here that if it is loading then I will simply display here are H1 with loading and else I will and now if I go back a little this page you will see here loading and then the name of the users if I load it again loading and then the users so in this way you can also handle different states like loading and when it is fulfilled and others and let me show you a quick example uh with the normal reducer if I simply uh close this one close this provider and go in the user slice and let's type here a value I called it 10. and here I add the increment then I have access to here to the state then let's type here state dot value um plus plus okay so to increment the value in the state if I simply save it now if I go to this page and here I can access the uh I also have to export that so I type here export const the increment and we have to get it from the user slice dot actions so I go to my page.js and here I will import it from the increment and then I add here a button [Music] um let me add here okay so now button I will type here click on me and then add here on click okay so on click I want to dispatch so dispatch um the increment like this okay and also I will get the value of the count okay and I will display that here so now if I go back and if I reload this page you will see here we get here the default um we didn't get here any value so we have here the count oh that is actually the value so I type here value Simply Save it and now if I go back and now if I click on here click on me you can see that the value is incrementing here so you can also use the normal reducer like this okay so I hope that you understand what we have discussed in this video if you have any question you can definitely ask in the comment section I will reply there and also if you want to check out my udemy courses the link is also in the description of this video and also you can find the source code of this video in the description of this video as well okay so if you have any question make sure to post that in the comment section and make sure to like this video if you got something from this video so I will see you in the next lecture

Channel: Coding With Abbas

Views: 19,036

Keywords: coding with abbas, next13, next.js 13, redux toolkit, redux, react redux, intergrate redux toolkit in nextjs, redux toolkit tutorial, redux toolkit typescript, redux toolkit project, redux toolkit in reactjs redux toolkit in react, redux toolkit in nextjs, toolkit, typescript, react, redux tutorial, redux in react js

Id: lxGfRABJp9g

Length: 24min 20sec (1460 seconds)

Published: Fri Jan 13 2023