Redux Async Actions - Redux Tutorial #6 Video Lecture | Learn and master: Flux - Game Development

okay we are almost ready to integrate
Redux into our react application and the
last thing we got to do is figure out
how to handle our async actions and
Redux actually makes that really easy
because with Redux tied into react react
is only ever a representation a view
representation of the state of the store
so as the store changes the view changes
but the view never changes unless the
store changes that's kind of the biggest
fundamental difference in redux is react
is simply a view layer only you move
absolutely all of the representation out
of the components and into the store so
basically you never ever ever use state
again you're always going to use props
that come from the store and async is
really where you kind of start to see
how that makes sense how it plays out
and it's a little bit different mentally
at first but then once you get it it's
really really simple
so first of all let's get rid of this
store subscribe and let's import a
logger
Ivan stored Redux I've installed Redux
logger
and then their way of doing it is you
actually have to do logger and then
actually run that as a function so now
we should start seeing these beautiful
logs excellent so we get our previous
state the action that was fired in the
next State Redux logger is very nice and
then we want to go ahead and instead of
dispatching an object that contains a
type and maybe a payload we actually
want to dispatch a function with that
receives one argument and that argument
will be the dispatcher all right will
actually call it dispatch it'll be the
dispatch function and then inside of
this function we can actually call
dispatch we can actually dispatch an
event here we can do something async and
then we can dispatch something else
so that'll basically be how we handle
asynchronous actions as far as redux and
react is concerned it's just a handful
of multiple synchronous actions and so
basically there's a thunk middleware
that allows us to do this very oh so
we're going to import redux thunk add
that as middleware and we're good to go
so then we can dispatch stuff of course
these are all going to be empty objects
because they don't have types you can
see I got a nice little error message
there so we'll just go type of foo for
now and then type of bar and there you
go so now multiple actions are happening
with one singular action and that's how
we're going to handle async actions so
let's go and import a xhr request which
Axios is kind of my favorite one these
days no need to bring in jQuery here if
you're working on the clients react is
awesome and that you'd never need jQuery
again so then we can actually dispatch
let's go ahead dispatch fetch users
let's say we're doing a fetch users
action will dispatch a fetch user start
right away with absolutely no payload
that way the UI can show a loading bar
or something like that or it can
reference that you've actually started
fetching those users they're going to go
ahead and get something I'm going to use
that free restful
API that I put up a while back rest
learn code Academy and I already posted
a couple users to that Dave Eastern
users this is actually a really fun way
to just mock out data instantly you can
start posting to any username and start
getting anything it'll basically create
a collection on demand so if you do a
post to I don't know jean-bob slash
users then it's going to create your
users collection right away and post
whatever object you're doing in there
the data just resets nightly you can see
more on rest out learn code Academy but
it's awesome for rapid prototyping so
we're just gonna get that then that'll
give us a response and we're just going
to run that and will dispatch something
else let's bring this up here so when
our response is received we're going to
go ahead and dispatch type fetch users
received actually this is probably
called receive users and then the
payload will be response data is the
format that Axios uses for that and then
if there's an error we can also catch
that
faites users error and the payload will
just be the error object so there we go
we have potentially three actions that
could go here we're always going to fire
fetch users start when that data is
received let's say half a second quarter
second later then we're going to fire
off a receive users with the payload of
that data and if there's an error we're
going to dispatch fetch users error so
now we have to do is go up to our
reducer and add those different states
so I can switch based off of make that
will cleaner
if our cases fetch user starts we're
going to run that block our case is
fetch users error we're going to run
that block whoops and if our case is
receive users we're going to run that
block add my breaks and we should be
good to go so there we go we have a
fetch user start you can see a little
bit later we've got our receive users so
all we have to do is actually have these
do something so right now my default
state is blank it's an empty object
let's go ahead and add an actual initial
state here now let's say fetching is
going to be false these are going to be
some nice pieces of data that our UI can
use fetching false so if fetching
switches to true then the UI can
automatically when it renders show a
loader and then fetched false we haven't
fetched anything yet so we will not show
SE the users array with an empty amount
of users in it
let's go users is empty right now and
then error is no no error so we won't
have to worry about showing that at all
so that's our default States then our
state can actually use this so now our
initial state will actually have that
information in it you can see there we
go boom boom boom initial States
populated so if the users start then
we're just going to return I'm going to
return States now we're going to change
fetching to true and then if there's an
error we're going to return the exact
say fetching is false we're done
fetching
and we're going to add the action
payload in is the error so the exact
same state we don't care about any of
the rest of the state but we are going
to change fetching to false and we are
going to add the error in there from the
action payload and then lastly receive
users we're going to pull in the state
the fetching is false fetched is true
and users is action payload and at this
point it probably makes sense to
actually break that into multiple lines
just keep things clean there we go so
now everything should work and our
logger should show us a beautiful amount
of stuff so at first you're fetching
false fetched false no users same is
true and then that's when it starts but
then you can see that it changes it to
fetching true fetched false no users and
then we received our users so now we
have fetching false fetched is true and
we have our two users in here which are
came from that API and we have an object
of will and we have an object of my wife
Laura so let's go ahead and make this
error there we go whoops how to typos in
that URL there you can see now it fired
fetch users start there's the Axios
error and then the fetch user's error
went often fired so now our next state
is err fetched fetching and still no
users so that's the way you do it with
thunks with by dispatching a single
function that receives a dispatch first
argument you can only ever give it one
argument that's what a thunk is you can
look up more on thunks that's a little
outside the scope of this video and then
if you do a lot of promises which this
returns a promise you can clean that up
a little bit more by doing redux promise
middleware so let's import promise there
we go promise is pulled in and then we
can actually do promise instead of thunk
or promise in addition to thunk there
you'll promise also has to be run as a
function and without you dispatch it a
little differently you'd still dispatch
a standard flux object so you dispatch
that and you give it a type which
doesn't really matter because we're not
doing anything yet so I'll just say type
of foo and then you actually return your
promise so here's my promise as the
payload and so that middleware that
promised middleware where was that right
there
promise middleware will notice that you
dispatched a payload that is a promise
type and it will automatically send
through some default messages some
default dispatches for you so let me go
ahead and make this work again there we
go so that's going to work clean this
code up here and so you'll notice that
automatically it sends off a foo pending
and so foo is going to be the type so I
guess I do want a fetch users so
automatically fires fetch users pending
and then it's going to fire fetch users
fulfilled whenever that's finished and
then should there be an error it will do
rejected fetch users pending fetch users
rejected so it is cleaner if you do a
lot of promises if all your a sink is
promises you're not really using es6
generators then that's really clean you
can see that cleans it up just fine and
then you just up here you go fetch users
pending fetch users rejected and then
fetch users what was that fulfilled it's
probably two L's in the fulfill no
there's just one a lot fulfilled Wow I
was home schooled let's make that error
again and you can see that rejected
picks up excellent so there you go that
is how you handle asynchronous actions
with redux you just change the way you
dispatch them so that's about all you
need to know in the next videos we can
actually tie this into our react
application and make the react
application simply reflect the state of
the store