How to fetch data from api in redux
Redux Toolkit Tutorial - 30 - Fetching Data
Timecodes:
welcome back everyone
in this video let's learn how to make
use of the async thunk in the user slice
to fetch and display data in our user
view component
let me begin by quickly recollecting the
code we have written in user slice
first we have the initial state which
contains three properties
loading to indicate if the request is
happening in the background
users to store the array of users
fetched from the api
and error to display an error if there
was any
next we have the async logic written
using the create async thunk function
the first argument is the action type
and the second argument is the async
function which returns a promise
in our case we query jsonplaceholder
and fetch the list of users
previously we were fetching only user
ids
as we did not have much space in the
terminal to view the entire user object
since we have the browser now let's
return response dot data
now we also learned that create async
thunk dispatches the lifecycle methods
of a promise as actions
so for fetch users
we have fetch users dot pending where we
set loading to true
dot fulfilled where we set users to
action dot payload
which is response dot data
and dot rejected where we set error to
action dot error dot message
we also export the async action thunk
and the reducer as default
our goal now is to display the fetched
list of users
in the user view component now this is
going to be a combination of the use
selector and use dispatch hooks we've
learned a few videos earlier
coupled with the use effect hook and
list rendering from react
let me walk you through the steps one by
one
first import use effect hook from react
and invoke it within the component
the first argument is a function
and we want this effect to run only on
component mount so we add an empty array
as dependency
for step two from within this effect
we have to dispatch the async action
to dispatch an action we need to use
dispatch hook
so at the top
import
use dispatch
from
react redux
we also import the fetch users function
so import
fetch users from user slice
now within the component
const dispatch
is equal to use dispatch
and within the use effect hook
call dispatch passing in fetch users
with parentheses
for the third and final step we get hold
off the state from user slice and render
the appropriate jsx
to select state from the redux store we
need the use selector hook
import it from react redox
within the component we can call use
selector
and for the selector function
we select the user state
so state dot user
let's store it in a constant called
user now for the jsx
if user
dot loading
is true
we show a loading text
else if there is an error
so not loading
and
there is an error
we display that error
user dot error
if it's neither
it's not user dot loading
and the user's array length is greater
than zero we display that list
so loading is false
and user dot users dot length
is positive
ul tag
user dot users dot
and for every user
list item tag
where we render
user dot name
key is going to be equal to user dot id
[Music]
and we handle the ternary case
and that is pretty much the jsx required
if we now head back to the browser
we can see the list of users being
displayed
if i open the redux dev tools you can
see the actions that have been
dispatched we have user
fetch users slash pending which is
dispatched when the api request is made
we then have slash fulfilled which is
dispatched when the api request
succeeded we can also see the diff in
state in both these cases
loading from false to true for pending
loading from true to false for fulfilled
and the user's array is also populated
let's also see how the ui behaves when
these actions are dispatched
initially no action is dispatched and we
have only list of users as text
then the pending action is dispatched
which sets loading to true
in the ui we see the loading
text finally
fulfilled action is dispatched and we
see the list of users displayed
if i change
the url to
jsonplaceholders dot com
head back to the browser
we see the error message displayed
network error
this is how you fetch and display data
with redux toolkit and react
hopefully you now have a complete
picture of how to use redux toolkit with
react
thank you for watching make sure to
subscribe to the channel and i'll see
you in the next video
Related queries:
how to get data from api in redux
how to fetch data from api using redux toolkit
how to fetch data from api using redux
how to fetch api in redux
how to get data from fetch api
how to fetch an api in javascript
fetch vs get api
