06 - Fetching data from an API using thunks [createAsyncThunk] - redux toolkit

hey what's up so i'm going to show you how we can fetch some data from an api using thunks so i'm assuming that you already know how to deal with things and you know what they are and use them in the normal redux setup so this is our current state we can add a to do we can delete one and these other actions are very simple and this is our slice this is the name as you can see it will be displayed here then forward slash the action was held which has the same name of the reducer very simple and really simplifies the stuff and to fetch data from a place or to show you the thunks and how we can deal with them in the redux toolkit i will be using this api this is free you can get some data from here so go to this url then posts this will return 100 post so let's try to fetch this and store it inside our store i will create a new feature to do this and i already have this folder yeah just to create a folder called posts inside your features folder and create two files the first one is the component that's why it's written in pascal case and the second one is the posts slice to javascript so this should be first the first couple of steps so from the toolkit import the create slice and create the slice so cost posts slice will be equal to create slice and password and object name would be posts initial state i will have an object with a list this would be energy i will store all the posts here and status this will hold the http status when spending once fulfilled and all of that so as you remember in our to-do's we have the reducers but the reducers that will be activated from a thunk from or from an actions that have been dispatched from a thunk they will be added in a key called extra reducers and let's continue that continue with that we need a thunk so first thing we will have the create asynchronous tank we will import it and i will create a thing called git posts and i will export it and that this accepts two things the first thing is the type the action type the the one that been displayed here so usually what they do they will have the same name here then forward slash the name of the thunk like this uh the second argument is the acychonous function and you need to return something from here or yeah i don't need to return anything from you so i'll return the returned value from the fetch api and i will go to this link paste it here now to then sorry i'll convert the response to gesso or d format and this the json actually turns a promise so all of yeah it retains the promise uh it's not relevant but just wanted to say to so to tell you that yeah and the next step is that this funk will dispatch two actions at most the first one is pending so when you dispatch it it will immediately dispatch a appending action and to handle that pending action we will do the following so add brackets to have a dynamic key so get posted pending and this will be the reducer that will handle the pending action that will be dispatched automatically from this thunk okay and just it's just like a normal reducer we have our state we have our action what i will do i will have state dot status equal loading so we might display a loader on the screen or something the next action that uh might be dispatched from this tongue is the fulfilled action this one this this tank returns with no errors and this will accept the state and the action and i will distract from it from the the payload so state dot list will be equal to payload and instead of status would be equal to success uh yeah of course you can't remove this i'm pretty sure you know you're yeah pretty sure you know the last action we need to hand it is our rejected action and this should this would be just like this but the status will be filled and that's pretty much it so let's now do or let's now export our post slice dot reducer so let's export the reducer that will be generated from this so yeah but before we continue let's just recap this is the thunk and each tank will dispatch at most two actions i mean by default of course you can modify that but by default it will dispatch two actions depending when you call it fulfilled when it's run without errors rejected when something throws an error inside of it so yeah and you need to hand it oh you don't need but you might want to handle these three so you'll do it like this really simple and of course you can put these in another file and import them and all of that and this is what i usually do i don't put everything here but uh yeah you can do that it's really simple i know that anyone watches this is not a beginner so they can do that on their own so we need now to import the reducer here in our store so this will be the posts reducer and from the from posts then pause the slides and this would be post reducer posts so let's go check our state we should see that we have this posts and empty list and the status of null which is nice so we will dispatch this thunk in the posts component if you know about in redux we usually has without any configuration or extra configuration we have only ty action types as an object containing the type and the payload and the payload of course is optional but you can extend this by allowing redux to accept uh functions as an actions and these are funcs and this is an example of it so we will dispatch this like this dispatch get posts and this actually returns a function and it will be handled by redux and if you remember in the in the normal redux without extra configuration or sorry in the normal redux you won't just put this configure store and uh continue you will need to add the middleware and stuff like that and configure the thunks uh the redux thing and you need also to install it but as you can see we we don't have the redux tank here everything is handled by the redux toolkit which is very nice so this is actually it we don't need to configure anything more than this which is nice so let's create this i have an extension so when i type react from rs fc to create this component for me this is the extension uh if you want to install it maybe so i like to have my i have i like to have uh only functional components in my application so i'm going to i'm going to show you how we can uh dispatch the this thunk only one time without repeating ourselves yeah i'll show you the issue then i will fix it without just speaking so yeah import from the activex use dispatch of course we will have that splash function and let's import our thunk the post slice i get pause thunk this just let's just dispatch it this return here maybe h1 like this uh posts okay so since this is exported let's go to our app.js let's import it here maybe and go to posts then posts and i will put it here so refresh the page you should see that we have two pending actions and two fulfilled actions which is not good and each time this component will be rerendered as you can see since we wrote it like this this action will be dispatched again and again so let's try to add anything as you can see that this is not good and look at the network tab we send this request too many times uh if you leave this if you leave it like this this might cause a memory leak so i'll show how we can fix it using the use effect hook from react so use effect password a callback function and inside of it dispatch thunk and to make it only around one time so let's see what will happen like this so refresh as you can see we have it one time uh it's still the same issue right so we can tell it to only run it only when the dispatch value have been changed so you will put it as another here this is called dependencies so when the dependence is changed this will be executed again so now this will only run one time this is the first time it won't run again yeah i'm pretty sure you know about this but just this is a cool trick so this is the response 100 posts let's go to our redux we should see that we have pending the status have been lo is loading at that state so we can maybe show a spinner then if we failed we have our list of 100 posts and the status success yeah i think that's pretty much it each tank will dispatch or can dispatch the actions are the pending the fulfilled the rejected and you will handle them in the external users uh property in this object and that's pretty much it it's really simple i think on the next the next step in your application you might need to pass some stuff to this function and to do it uh you can do this because only the first argument will be passed here at the first argument here so my recommendation is only to pass an object i will put maybe limit as five like this so yeah these funk functions when you dispatch them they will only accept one argument and i highly recommend that you put an object so you can mass pass multiple values so this would be this this object uh the second argument this would be passed by the toolkit and this will this will be an object and from it that we have so um we have some useful functions one of them is the dispatch function so we might from here dispatch any action where you want and sometimes you want to do this and usually what i do after the response have returned with no errors i'll put then maybe dispatch some action uh like like here as you can see maybe i would smash something like this or in case of catch yeah i will leave this just as a reference for you another thing you might need is the stat itself maybe in the when i fix the posts i need some information from my to do for my to-do list reducer so we can get the git state function and this actually will be the whole state not only this stage for this slice no no the whole step so we can actually get the to-do's as you can see like this i will show and i will log it just to prove it to i think yeah that's pretty much it pretty much it now let's just use this thing here we passed an object with a limit so let's destruct that i would convert this to template string i will put the query param here like this so let's go and see this in the console so first thing as you can see our to do this is empty i think i don't think i can show this to you maybe if i have yeah by initial state i can have maybe something like this id one txt let's duplicate this zero two zero three so refresh as you can see this have been logged from our thunk from this rank from this line okay yeah just i just i want to show you that you can access the state maybe you needed to send that or something you don't need to like connect everything um they did they do a pretty good job on that yeah i'll just comment this i will leave it as a reference for you and these two and as you can see our network uh request let me go to it only returned five because we send in the query params to have limit of 5 which we passed from here so i think that's it that's it for the redux toolkit this is the basics and this will make you build really fast redux applications or fast i mean by time you will build it in a fast time the faster time then just configure getting your own redux yeah that's pretty much it i hope this was useful and i'm still learning this library my on my own and when i learned something interesting or something new or something i didn't show you here i will definitely do a video about it and yeah i really liked it i highly recommend that you check it out and yeah bye thank you

Channel: Rowadz

Views: 74,143

Keywords: Javascript, React, Programming, ES6, ECMAScript, Coding, Tutorial, Code Alongs, 2020, Hooks, useState, state, props, createSlice, Redux, Redux Toolkit, create-react-app, configureStore, immer, createEntityAdapter, normalizing, normalizing the state

Id: xtD4YMKWI7w

Length: 16min 28sec (988 seconds)

Published: Fri Dec 11 2020