Async Thunks in React Redux Toolkit with TypeScript

hey what's going on in the previous video we created a Redux store with the help of Redux toolkit and talked about how we can create our slices and how to dispatch an action to the Redux store and also how we can retrieve our data from the Redux store by using use selector hook so this is the app that we have created in the previous video and this app has two components one is the add component which is responsible for adding data to our Redux store and this is the list component which is responsible for retrieving our data from the Redux store and showing them to the user in this video we are going to sync a Redux store with the backend database using async thanks so imagine that we have a backend database that keeps the list of the persons and we want to sync our store with this database by default we cannot do a synchronous operation like fetching our data from a backend in the Redux actions so one way to populate the Redux store with the backend data is to fetch the data outside the store and then dispatch an action to populate the store with the fetch data obviously this is not a good idea so there must be a way to allow us to do asynchronous operation inside the Redux store the solution to this problem is to use async thanks basically async funks are kind of actions that allow us to do asynchronous operation inside the Redux store so to see how we can use them with the Redux store stick to this video till the end so without further Ado let's get into it so I open up my visual studio code and loaded my previous video project so the first thing I'm going to do is to create an async funk for fetching our persons from the back end so I go to the person slice and before this person slice here I'm gonna create an async thank so I say export const I'm going to name it fetch person let's say fetch person and this fetch person equals to in function called create asynthunk which comes from the Redux toolkit so I say create async funk and this create asynchron function takes two parameters one is a key for this asynct which has to be unique among other asyncts in the store so I say for example fetch a person slash fits for the key and the other is a is in front async function which actually retrieve our data from the back end so I'm going to create an arrow async function here so I say async and create an arrow function which takes in parameter name thank API and inside this function I'm going to fetch our data from the back end so I say accounts response equals to a weight fetch and put my API address I have a local server which exposes two API one for adding data and the other for retrieving data from the back end so I put it in the fetch function and set the method of this fetch function to get and say const data equals to response that Json and then return our data so that's it we have created an async func this create asynthunk takes two parameters this is the key for the async tank which has to be unique and the other just regular async function that retrieve our data from the backend database so the next step is to add this async function which I've created here to this person slice to do this inside the person slice and below the producers object we are going to add a function called extra reducers and this extra reducer function take a parameter called inside the body of this function I'm going to say Builder that add case and this add case function takes two parameters the first one is the name of our tank which is fetch person and then that's fulfill so basically every async thunk has three state the first one is fulfilled for when the this async function inside the thunk returns data without any error the second state is loading state which is just a loading state for when the async function inside the tongue has not yet been resolved and the third one is error state which is for when the async function inside the trunk returned with an error so here we want to say that when fetch version has been fulfilled do something for us so in the second argument we're going to pass a arrow function with two parameters our state and an action which this action has a payload which is actually is the data has been returned by this async tank so inside this Arrow function we're going to say our state that persons equals to action dot payload so as I said this payload is the actual persons which has been returned by this async function inside the fetch versions now let me add another asynctunk for saving a new person to our backend database so here just like before say export const and in this case we're going to name it save person and this equals to create async thumb function then the the key for the async tank which in this case I'm going to say person slash save and then an async function which this async function takes now two parameter the first one is the name of the person which we are going to save so I say to type string and the second one just like before our tank API and set the body of this function I'm going to call fetch API so I say count response equals to weight fetch and the others of our backend API and then set its method to post and then set its header say content type application slash Json and then set its body to Json that's stringify and then pass an object with name inside it so this name parameter goes as a body of fetch API note that this API here expects an object with a name inside it for this particular API and then create a person based on it and then save it to its database so now here just like before we're going to say const data equals to weight response that Json and then return this data so actually this data that has been returned in from the backend is going to be a person object with its name and generated ID inside it so now let me add or register this asynctunk in extra reducer function so here I say Builder that add case and say when save person has been fulfilled run this callback for me so I say State and action then say state that persons that push this action .pailed so the payload of this action is going to be this data that has been returned from our async thumb of course you can add another cases for this safe person for example safe person that loading or safe person.evero but we're not going to do this in this video okay now that we have created our async funds and registered them in our person slides we can easily use them in our components so let me show you how we can do this so I go to the add component here and inside the unclick event of this add button instead of dispatching add version action we're going to dispatch our async Funk which is save person and comes from the person slice and here just need to add name dot current not just an object with the with the name inside it just name that current so that's it we are dispatching save person into our Redux store and in the app.ts6 we are going to dispatch fetch person Funk to fetch the persons from the backend server and populate our store with that data so here we're gonna Define uh use app display so I say const dispatch equals to use app dispatch and then in the use effect hook we're going to say dispatch persons which comes from the personal slice and this fetch person takes new parameters so that's it and this first person is going to fetch our data and then populate the state from the return data that has been returned from the backend database and also in the list component we as before we have a use app selector that select the person state from the person slice and look through the dispersions and show them to the user so let me run our server and CR app and you can see that it already fetched our data from the database and show show them to the user so if I add a person another person here for example person four you can see that it has been added to the database so if I refresh the page here you can see the data is retrieved again from the database and and are shown to the user so let me review what we have done in the person slice first of all we have to define the async funds with create asymptank function and then register them in the extra reducer functions from the person slice so I think that's it for today and in the next video I am going to cover custom selector from the Redux store so in order to get informed about my next video please subscribe to the channel and hit the Bell button bye bye

Channel: Sakura Dev

Views: 18,582

Keywords:

Id: qedcu9UqHzw

Length: 12min 35sec (755 seconds)

Published: Wed Nov 02 2022