React Redux Toolkit with TypeScript

hey what's going on in this video I am going to create a redox store in reactant typescript and I'm going to do this with the help of redox toolkit and in the next video I am going to use async funks to fetch and insert data to a backend database directly from the Redux store so without further Ado let's get started so here I have a plain react application and what I'm going to do is to create a Redux store in which I'm going to keep a list of persons for example and then I'm going to create two components one for adding new persons to the Redux store and the other for fetching the persons from the store and showing them to the user so let's get started before going ahead we have to install react Redux and also Redux toolkit so I say npm install react Redux and also at Redux Js slash toolkit since I have installed these packages before I'm not going to press enter here so here in the source folder I'm going to create a company a components folder and set that components I'm going to create a add.tsx and also a list dot TSX so I go back to the add components and create a functional component here and I'm going to go to the list component and create a functional component as well and next thing I want to do is to create a store folder in the sourceful layer so I create store and inside that store I'm going to create another folder which is called feature and these features a folder contain our store slices so essentially we can we can have a main store which can be divided into slices just like a cake that can be divided into slices so in the features I'm going to create a file called person slice and inside this person's slice I'm going to export a an interface exports interface which Define the our person object check so I say person and for the sake of Simplicity I'm going to Define just ID and a name for this person so I say ID which is a number and also name which is typed string next thing I want to do is to Define an interface for the state of these slides so I say interface person State and here we are going to have a list of persons so I say persons just type of list of person interface features we have defined here so our state is going to have a list of persons next thing I want to do is to the Define our initial state so I say const initial state which is a type of person State person State and here our initial state is just an empty list so I set persons to an empty list here next thing you want to do is to create our slice so here I say export const person slice equal to create slice which is a function that comes from the Redux toolkit and inside that function I want to pass an object first we have to define the name of the the slice so I set name to just person and then I'm going to add our initial state so I say initial State and next we are going to Define our reducers which is an object that contains our actions so our actions are essentially function that can mutate our state so for example say we have a add person action that can be used to add a new person to our this person list here so I say add person say the function that takes in our state and also in action foreign so this action is type of payload action which comes from the Redux toolkit here and with this payload action we can Define the type of parameter which we can pass through this action so I say name equal to string so by this I mean that when we are dispatching add person action from our component to the to the Redux store we can pass an object which contains a name of string as a parameter to this add person action so there we can see how it works so in this add person function I say our state that persons that push an object uh which is which its ID is a safe state that person's that length and its name comes from this payload action so I say action that's payload dot name so by this we can insert a new person to our Redux store and at the end we have to export default are person slice person slice the reducer and also our action so I say export const an object and it is equal to person slice person that actions and inside that object we're gonna destructure the add person so we are going to go to the store folder and create our store so here in the store folder I'm going to create a file called store.ts and here we're going to export crunched our store equals to configure store which comes from the redox toolkit and pass an object to it with reducer and say person equals to personal slice dot reducer and finally we have to export our app dispatch which is used to dispatch our action to the store and also app selector which by that we can retrieve our data from this store so I say export const use app dispatch set to function and say type of a store that dispatch equals to use dispatch and then say export Advanced use app selector equals to typed use selector you select typed you select a hook and then inside the angle bracket I say return type and again angle brackets and inside them I say type of store that get State and then say equal to use selector yeah it's kind of getting complicated but if you're using typescript you have to write these two lines of code to use use app dispatch and use app selector correctly so later in this video you can see that how we can use use app dispatch and use app selector so here we are done with the with with our store and let's go to develop our two components add and list so I switch back to the add components here I'm going to create a form for adding uh persons to the Redux store so I say four and here I'm going to create a label and set that label I'm going to say person name also I'm going to create a an input and also I want to create a button I'll say in this button just add and for the sake of time just copy and paste a couple of classes to style this component by the way I'm using Telvin CSS classes here if you want to know and here I want to create a user so I say const name equal to user I'm here in the input say on change say name that current equals to P dot Target that value and also here I'm gonna use our use app dispatch which I have already defined here in the store.ts so I say const dispatch equals to use app dispatch and in the on click events of this button I'm gonna call or dispatch this add person which I've created here so this button I say on click dispatch add person which comes from our personal slice here and this ad person takes an argument which is a name of the person so I say name that current and let's import this ad that person from our person slice so here we've got an error it's because we have to send this name as an object and say name equals to name Dot card so that's it for the add component and let's quickly develop our list component and then run our server so here I'm going to create a paragraph just to say that this is really our list component so this I said this is list component and then I'm going to create a table inside that table I want to create our table head so I say t hit then create a table row and then Define our table heads so I say th ID and also another for name so in order to get or fetch our list of person from our store we have to use use app selector which uh we have already defined in this file store.ts use apps lecture so I say const persons equals to use app selector and this use app selector takes a callback which takes our state in turn and then it Returns what we want it to return from our state so I say State return State DOT persons that persons so state it is is our whole state and person is our personal slice and from the personal slice we are going to retrieve persons list which we have defined in our personal slice now we have access to the personal list from our store so here we can add our tea body our table buddy inside our tea body I'm going to Loop through the person list so I say persons that map person and say TR then in the so key equals to personal ID and here in the TR I'm going to create two TD one for the person that ID person that ID and another for person.name so here for just for the sake of time let's copy paste couple of table and CSS classes to style our components okay we're done with the list component and let's go to the app.t6 and add these two components and then run our server so I say add and then add our list okay now let me start our server and test our application so I say npm run div so we have two components here this is the ad components and this is the list component so here let me quickly add a dummy person here so I say John for example and you can see the John added to the redox store and this list component shows it to the user so let me add another person for example Mike and you can see that Mike also shows up in the list component so let me review what we have done in this app so back to the visual studio code and here we have two components one is the add components and the other is the list component so in the add component we have used use app dispatch to send the add person action with the name parameter to the redox store in order to insert a new person to the Redux store and in the list component we have used use app selector which we have defined in in our store here use app selector and we use this use app selector to select the person list from the person slice which we have defined here this person list here so when we select the person's list from the person slice with use app selector we have Loop through the persons and show them to the user so any so in a concise world we use use app selector to select or retrieve our data from the store and we use use app dispatch to send an action to this store for example inserting or adding a new person to our store so I think that's it for today and in my next video I'm going to show you how we can sync our Redux store with the backend database and use async funks to do asynchronous operation in our store so be sure to see that video as well and if you haven't subscribed to the Channel please subscribe to the channel and if you like the video please hit the like button bye bye

Channel: Sakura Dev

Views: 43,661

Keywords: redux, redux toolkit, redux toolkit tutorial typescript, redux toolkit tutorial react, redux toolkit tutorial for beginners, redux toolkit typescript, redux toolkit tutorial, redux in react js, react redux, redux tutorial, how to use redux thunk in react, how to setup redux toolkit, redux toolkit with typescript

Id: EqbwHO6Vgbg

Length: 16min 30sec (990 seconds)

Published: Mon Oct 31 2022