Redux Tutorial | 07 - Redux with TypeScript in Next.js-13 Project

hi there in this tutorial we  are going to use the Redux with   Redux toolkit in our nexjs project with  typescript so let's see how can you do that   so for that I am going to my desktop creating a  new project and I am using the pmpm package so next yes 13 app yes Source director you know default router yes  and no need to customize the article input   so it will download my project in a minute now my application is downloaded my Nexus  app downloaded so open my code editor 30 next Js 13 actually it should be reduction so if I open my console click Ctrl click this link it  will open new browser new tab now my next app is running but  if I go if I refresh my page I will see there is an error this error is the  so I have installed sub login in my browser like   Redux devtool so similar similarly this this is  the error comes from this type of plugin so let's   go to our project at first let's  go app is and remove the default home and it will be if I save my file refresh my page I can  see the default style is still applied   and the error message appear so let's  fix this problem for that I have to go   to my layout and inside this layout I have to  remove this error for that I have to use the suppress hydration warning it will be true and remove the style and no need Global  CSS no need this one and this one   and my app is a little bit  typeless I am typing in online and let's put this type here so it will be props and these props will be props and here I type so it will be children Pro props and if I save my file and if I refresh my page I can see my  steady moving and my error has gone this   error is nothing this error is the Firefox  browsers error it is not a error so our   page is running now let's install the Redux  toolkit so for that I have to go to my actually it is a pnpm actually it is apt and I have to need the add   it exists r e d e u x j slash toolkit and  I need another Library called react Redux react reductions it will download let's  create our Redux project in my house at my app and let's create a store will be configure configure store and it needs a reducer and let's create a slice for that let's create  a user slice unless person empty object so it says the let's clear the user slice for that I have  to go to my store and create a slice here   slice slash user.ts [Music] and it will be creative create slice from the Redux toolkit and  it may take an argument fast on name will be the   user and initial state will be the initial  State let's clear the initial state initial state will be loading  will be false actually error will be string so and we  need third argument called reducers and it is an empty State empty object  for now so let's we know that created   drugs create slice written  two things so to put on object and fast on is the reducer and second one is  the actions so we need the reducer to export so   export default   reducer so our reducer is ready but let's add  some times for my initial steps so let's create state will be these two type but it will be Boolean it will be  history and apply the type here initial State now my slice is  ready let's apply this slice here import user slice from slice  slash user and now apply the   user slice here now my history is  complete so let's export this store   actually let's export direct here name export  now my story is ready now apply this store in my   app so I have to use if I try to use only the  home page then I have to wrap this homepage but I   need to apply my redox Crystal for NTR project so  for that I have to use the in the layout page so   if I try to use a store here like this way  actually not here it will be inside body now if I try to spot here like provider  comes on the next Library lives provider actually it should become from the rear  Redux I install the react Redux so it will be like import provider provider from react reacted  X and this provider needs the   store will be a store that we create in my Play  Store application yeah a store directory this one   here but the problem is that if I do so it  will throw it it will throw error because my   layout in Nexus 13 every component is the  server component and the provider must be   client component so I I have to convert this  page as a client component if we need to use   the provider here but I do not want to do that  because this page or this layout page should   be used in every page so if I make this  space as a client component then my NTR   project will be as a client component but  so that we do that we do not want so I have   to create a separate component for this provider  and and clear that component as a child component   sorry as a client component and then I will apply  here so let's go to my S2 and if I create here Dot TSX it will be the react function component whatever  we have function component   it will be uh provider actually it will be uh Redux Redux provider now I have to put this  provider here instead of here so it will be Provider from the react Redux and  I have to store a store will be   installed now I have to provide a child component  from here so I have to use the child component   children will be let's provide the type  props type will be props and it will be c-h-i-l-dr children will be react Dot react  node now I have to pass these children inside my children and make this component as a  client component so let's create this fuse   client now I have to import this provider in my  layout page so instead of here I have to put the let's remove this line and I  have to use the Redux provider   Redux Provider from the store and I have to  wrap the child here this is the original oil   or the actual oil to use the Redux so  if I save my file if I go to my browser if I refresh the page I can see my readers  depth tool is active that means our   is applied so if I go to my hair if I go to  Redux app I can see my user slice is available   though there is nothing anything so  let's improve our user slice little bit   let's try to read our store for that I  have to go to my close this one this one   and here's a slice we need little bit let's try  to read our store so for that if I try to use like if I try to dispatch something like is to constant dispatch will be use this patch from  the reacts and in let's create a button   it will be the u double T1 button it will be  get user or add user or whatever name let's   add a even listener on click and this  click Handler will be handle user add handle user ad and if I need to dispatch  something like dispatch type will be loading or requested requested and the payload will be object like user let's create a user alerts  for them create a dumb user user will be actually let's use our data because we will create new user from the store  so if I do so let's ID will be one name will be   my name if I do so to handle the  dispatch actually I am creating the   user slice so this user slice like if I if I save  my file if I ah again this space is again is the   server component and I am using the client one  click Handler that means the user actions if and   also the dispatch that means when we need anything  like user actions like a click Handler or the any   react hoop then we must convert this page into a  client component again we do not want to clear the   entire face as a client component I have to create  only these two four part this you have to create   a separate component with this Square element  and then create this Two element as a client   component and then apply in the home place but for  Simplicity it is not a there is a tutorial it is a   Redux tutorial so I will focus only the Redux part  so let's clear the component as a client component client if I save my file now if I click this button I can see that my it  will show nothing because my dispatch does not   reach to my store so I have to create my store  for that so let's handle my reducer State here   let's create the actually my name will be user  slash created let's add a user with prefix user   slice and to actually activate this user slash  I have to clear the requested here it will be   requested it will be a function and  let's return it takes two argument on his   State another is action but for now we  need the action so we only need a state so   paste it and loading will be true because  it is the requested so if I save my file   and this time my requested will be as a user slice  requested if I click this button and go to my   I can see that my user appears if I go  to I can see my initial State value was   false but this time it is a true if I go to my  actions I can see I am passing actually I am   passing that about I am not using this data  just try to update my user loading to true so that's what I have now I discuss something  but if I try to uh read my data store from   the hair so if I click constant let's  reading the loading or everything as store will be Aston Knight will be state  will be use use selector and it will be   tested Dot paste it and we clear the user slice  in my component I am casting the user slice so I   have to use a state DOT user but I can see  that I cannot access the user because I do   not have the type for this state but I can use  if I save my file let's console log this state   actually let's show the state here below very Json Dot stringify and it will be the  state null and do if I save my file I   can see my whole estate appears but if I  try to access my estate only if I try to   only access the user section or user slice  I cannot because type skip through an errors now I have to clear the type for the this user  so for that I have to go to my store I have to   create two types one for the tested and another to  read the stated another for the dispatch though in   here it does not throw the errors actually  this one here we need to pass the proper type   yeah yes it will throw an errors so let's  see how can you do that in two things for   that I have to create the type will be app root  app or uh root it will be actually it will be   store dot get tested not store type  will be root app is equal to a store Dot why I can cannot get it will be s t o r e s store I am getting the error let's try our store Dot get state now I have to type root or yeah root this way and it will be type  of get State because I do not need my type for   the project so I need sorry I do it is a function  so if I use this one it will return the function   but I do not need to return the function I need  to return the return value of that function for   that I have to here it will be written function  return sorry return type it will be this way the so it is my Approach so I need my dispatch  another one for this pass so it will be type f g i a double p f dispatch will be type of  store Dot get sorry yesterday dot dispatch   now I have to export this type here actually both   export export now if I go to my page I  can use here like it was the name was the   app display router approach so I have to  use here if I go here if I type app download actually it should be autocomplete  let's go to export export it's in wrap and then put the type it will be have  approot now my Approach comes from my tester and   then if I try to use my dot user I can see my auto  compilation works and also if I type instead of   yesterday if I type user here it will also works  so let's put the user instead of the whole state   now if I save my file if I go to my it will work  exactly but this time I will get only the user   slice now my history is complete but if I go to  my user slice I do not handle anything so let's   handle another one one for requested I will create  another one for succeed success scenario for that   succeed it will be again and function and return  object so I will return the same estate and   action and I will return it will be  original estate then loading will be false   then user will be action.payload action Dot payload but here my action  has any that means it is the value of any   so I have to type my proper action type  for that I it it will be payload action   payload action type from the Redux  toolkit and then I have to pass the user   the data I require so let's create a  user user let's create the user here   type user will be a user should be on ID and it  will be string actually I created this user in my   no I do did not create so it will be  ID and another one it will be name   for example it will be again string and  let's create our user very simple or email it again history in my this is my user  slides so I in my action dot payload   in my action.payload I must have the  user so let's I am creating the user   property but my user property not in my  available in my estate so let's clear the   user here user will be initial value will be  null but as soon as I do that my typescript is   threaded because I do not have user here so I have  to create the user it will be user or null so if   hash user then has user or not so now my success  scenario is handled so instead of the Hardware is   made dispatch now instead of the hard coding  dispatch let's create our dispatch from here it will be constant add user user will be one function and we  already talked about that this dispatch can have   two two function that means it is a closer and  fast user will be the user it will be the user   and user will be the user type that we created  in my top and then it will be the dispatch   dispatch and this press type will be  app dispatch that we created in my   app dispatch in my store.js so I have to use the app dispatch now inside this app inside  this function I I will try to update my   estate so I it will be dispatch  and inside this dispatch I have   the actions so in this action will we have  the available all the property so it will be actions dot I can see the success  scenario and here I will pass the user now let's show the error scenario for  that loading scenario so I have to use the requested and requested does not nothing requires  so that is the error and if I could put any errors   then it will be the error type though  I am creating or error or failed   field I am creating nothing it  so let's clear the fail scenario   for that I have to copy paste the same line  at comma and it will be chain and this time   the payload when we failed our payload will  be an instinct that means that like something user not in the founder anything anything like  this so it will be string so instead of the   user it will be string and user user will be null but error will be the string if I now if I comment  out comment audition now I can see there is no   error but I will only show the displays here when  our error appears that means if I try to use here   try catch below error and here  will be the dispatch like this one now I have my app user available so I have to  create my I can dispatch this app user like here   instead of hard coding user I have to face like  dispatch it will be add user actually name was name was add user so it will be at user add user actually aw add user I did not export it maybe  I do not export so it will be export and then if   I try to I can see my auto compilation comes  and I will call this function and I have to   pass the user here it will be user data but it is  thorough's error because it says that I am missing   uh whatever it says that I am missing the  email property because in my user slice   sorry user type I has the ID name and email  and here I am passing all the only the idea   name that is the reason it throws the error  email will be ABC at the rate of gmail.com if I do so now I can see I have  a and I have a problem because   in my dispatch I do not have  the type so I have to use the   it will be app dispatch like this one now I  can see my error has gone if I save my file   if I go to my base and it if I click this button  I can see I am getting the user value here now   here I am creating my hard-coded property or I am  passing the property type for every user or every   sorry every dispatch or every selector so instead  of this user and selector I will create a new uh for these two things so let's create  the hook so let's go to my page and   inside the store I will create  another file it will be hoax so   it will be is develop hooks.ts now let's create  two hooks for my to dispatch or two actions   first one use display so let's go to my hook it  will be uh use use dispatch here and I I have   to call the I if I need to pass like if I need to  pass my use displays I have to call this dispatch   so I have to call this this one and as soon as I  do that let's see your next constant uh it will be fdisp dispatch but as soon as let's pass the  whatever it name was app dispatch so it will be   app dispatch like this one but when I do that  it will my app dispatch will be in return value   but I do not want to the written below the app  displays must be an function so for that I have to   create this way it will solve my yeah sorry  it will create my app displays and I have to   create another one for my use selector so  let's create another one for if selector   constant it will be uh use a selector so use app selector will be is equal to  is absolutely is equal to use selector   and this time my app selector will be  type type use app selector hook and then   I have to pass my same type let's see that my  type my type was the approved so it will be   app Root now actually it will be the use  use app selector instead of app selector   use sorry it will be use app use F7 not it  will be use app dispense use app dispatch   so I have to now I have to this password to  types for these two properties two hooks so let's   key export these two onto e x export  this one export this one and instead of   this so this two line I can create I access my  see when it's constant dis patch will be use app   dispatch in my form I hope so I can comment out  this line the like I can see that I do not need   to pass app dispatch to dispatch something so I  can see this works now I will create the another   one like this one but this time I will use a  selector from the hope and it will be tested   estate dot user I can see import this one  or actually here I do not use the user if I do this actually it has the error  this way if I remove the user here   user now if I save my file a user have events ah  I have either so if I save my file actually let's   remove all the comments sorry all the comments  or unuser used properties if I save my file   if I go to my browser now I can see  my user appears that means it is the   custom type custom hook for my instead of hard  coding hook so you solve the this problem now   I have to handle my action add failed scenario I  do not handle the failed scenario though it will   clear the field let's consume our API for that  let's create our API in my app I can create API   directory and inside I need to access the user  by ID so I have to clear the users slash then ID   slash s dot then route.ts this is the Nexus 13y  to create the slice it like if I try to access the   API like slash API slash users slash ID that means  the two or one whatever so for that I have to   clear the API directory inside the API directory  users and insert the users in app ID this way and   then I have to Route so let's clear the route  for that it will be the function like get   so in the gate I have the written value  so resp actually it will be next response   next response dot Json because we need always Json  to fix data so I have like a status it will be   sorry it will be success and data that means user  will be or the data data will be the user let's at   first let's pass the mte data or nothing I have to  return this value so returns this response and I   have to export this function to work as API so if  I go to let's check how a I get get this response   or not if I save my file if I go to my page it  will be localhost 3000 API slash users slash two   Place console log my L at first  let's see what I will get if I enter I can see I am getting the same response   now I am passing my user data like is ready so  let's how can we access this user ID in Nexus   13 as to property here one will be the request and  request will be request type and another one will   be context so I can use the as a perhaps this one  params will be done type I can type like this way   params Dot ID will be history and if I  console log it will be ID will be params.id   if I save my file if I try to refresh this  space again I can see my ID appears here   but it will create lot of mess because when I use  the type it will it like this line will be goes   very long so let's at first let's go handle our  error at first I will try to add the type later   now in my type in my I have this one that means  ID name and email these three property so I need   image route I need a return the same  thing for that if I try to return   like uh ID one actually ID I am getting  the ID so ID will with ID so ID will be   PR in params.id and second name  let's pass the hard coded name actually I will get the name for my body request  or actually it is a get request so let's pass the   hard coded name and later we will fix this  name from the database but now for hardcoded   below and another one for email but I am not  passing the email here let's type the email see actually my email JavaScript for  everything at the rate of gmail.com   but I am copy making the this property as a  comment so let's see that how can we access   this get method in my app for that I have to  use my click Handler let's face the app here let's comment out everything for now and see  each it will be the user and user we know that   API slash users slash ID and let's pass the  ID for now let's pass the two I am passing the   hardcoding below let's see in my second argument  it is a method but it is a get get you guys so   I do not need anything else so I have to constant  response will be it is a for me so awake and make   sure function is asynchronous and then I have to  response.json because I am returning as a Json   so I am parsing as a Json again it is a  promise so I have to use the this so it will be   avoid let's constant user as user and  let's console log the user if I do so let's go to my app refresh the page if I  click this button I can see I am getting   my user data from my backend that means status  and data and data is the user ID but I do not   have the proper type let's type here user dot  I can see I cannot have the types because in   my fish API I do not apply the type so let's  get the type for that I have to export like in my app I am using the user  here so let's export this user   export the user type and add the user  type here [Music] it will be Json as user he is the user from the user user slice  so if I now try to type user dot I can see my   auto compilation for that actually it is the type  casting it is called type casting so I am typing   the user but in my response I do not have the  image like in my response response have because in   my response I do not use the proper types for the  typescript so let's see what happens if I do so   and let's console log let's instead of consulate  here I use the email will be user dot email if I save my file click this user I can see my email appears nothing  but type skip does not sorry error because I am   typecasting not perfect type because Json vs  API does not helps the has the proper type it   use this oil so I effort to fix this error or fix  this problem I have to properly type in this my   uh written below so let's see how can you do  that for that I have to create response type here   that means it will be this  one actually let's it will be next yes response and it will be my data  let's create my response here it will be la my response and my response was these two things that means  one will be status SDA is status will be either sexy it's not success success or it will be failed  so let's add another one for my user so actually   not user it is a data and data will be the user uh  let's for now pass the hard coded value easier and   I have to import the user from the same user slice  but in real scenario we will use the separate file   for all the types in my project but for now I am  using the same place that means the user slice for   the type but it is not a bit bits practice now  I have the response type so I have to apply my   response type here it will be let's remove it will  be actually my response now as soon as I do that I   can see the error because in my user has the email  property and I am disabling the email property or   I am not passing the email property that is the  reason it shows the error if I uncomment this   line I can see my error has gone if I save my file  now it is properly typed so if I click this button   actually I am getting the same error again  let's refresh the page if I click this button   let's see what I get in my console console user Okay click this button my data   data has name email I have the email but  I do not show the email I don't know no uh let's see I have email in my  response and I can see my email has but   if I try to use this one my email does not show let's console log again if I do so I am getting the user but if I try to user this way only the image what I get I  get undefined what is the problem let's see   because let's see check the problem here in my  app because easily the request route is the uh   permis so let's clear this it is as  a promise so first let's add here   essing because most of the time that happen  that every gate or post every request must be   promised because I need some fixed data from  my backend and that will be promised so when   I do that I have to get my permission so it  will be promise and wrap the entire thing   as a promise so it will solve the problem  let's see now I getting the same user or not ah my data has the email   am I miss Type e m a i l email list see  I am a mistake or not no I have the email uh the problem I cannot know what is  the problem let's check out the problem actually I don't know do not know the why the  user I can see my user has the data user has   the email address but here when I try to access  user.email I cannot access the user let's see put   the user in my database because sorry in my  store redox store so this way let's maybe it   will no problem here so let's dispatch here now  actually it will be less rename as a user data   because I have another same name in my top  that is the reason now I have the user data   and I am pushing the user data in my store  and I already choose the user for the store   and pass the store here so let's see what I  get if I save my file if I click this button I can see my user APS fine if I now  if I try to access the user like like uh user dot email that it  will be actually it is optional so because my Estate Value in my Redux store  in my relax store user has to type either   user or null so that is the reason my email  user is all can be possible null or user   so that is the encryption and let's add a  email will be email if I save my file I can   I can see my email again missing missing from here  let's update let's get the user I have user email   I do not know the problem uh why I am not  getting the user let's put this way uh I am passing my user here my Ester has the user  I can see my history has the user image exactly   the same oil in here I console log there but  the problem let's say we will check out this   problem later but this is the why how can we  access our reduxister or complete our religious   store from the backend and this is the proper  type I have to always type like this one but it   will create lot of means layers put little  bit complication because I can see my base   line is 168 that is not good so for that I can  use my at least use this one as a context ah it will be context type let's clear  the context type here it will be   types corn c o n t e x to context  it will be the paste the value now I can see little bit solar if I save  my file I will get everything as it is   if I refresh my base is the  user but is still email missing   so let's ignore this email I will try what is the  problem later so this is the why how can we use   tie a Redux in our typescript with Nexus  project so let's see in next tutorial   or actually it was the last tutorial on my react   Redux for absolute beginner course  so let's see in our another playlist

Channel: JavascriptForEverything

Views: 612

Keywords: Redux Tutorial, Understanding Redux, use redux in node.js application, How to use redux in backend, React Redux, How to use redux with typescript in next.js 13 app, redux toolkit with typescript in next.js 13, redux toolkit, typescript, next.js 13, next.js 13 App Route with proper type

Id: 3zksshqTTQ8

Length: 55min 4sec (3304 seconds)

Published: Fri Aug 04 2023