Let's talk about one of the redux plug ins that is probably the most interestingly named redux thunk 2
. 3
This library is used to aid with handling asynchronous action creators. 4
We're going to divide this video in which we discuss redux thunk into two separate sections. 5
First we're going to discuss why redux thung exists and then we're going to talk about how to use redux 6
thunk. 7
The purpose of redux itself is to hold our application state. 8
One of the great features of redox is that we can change our state in a very well-defined pattern and 9
it's a pattern that we repeat over and over in our applications. 10
We call an action Creator. 11
This produces an action the action flows into our middleware then our reducers and our reducers produce 12
our new application state which then flows into react. 13
We then sit around and wait for the user to initiate basically some other change inside of our application 14
that repeats that process all over again. 15
So this process as I've laid it out works just fine and dandy for any type of synchronous change in 16
a redux application by synchronous I mean that when we call an action creator we immediately returning 17
an action which instantly flows into our middleware and our reducers the vast majority of web applications 18
we build however need to fetch data through asynchronous channels. 19
In other words it's much more common that when we call an action creator we actually want to go and 20
fetch some amount of data from some API or you know some asynchronous action and only when that request 21
resolves are we actually ready to create an action. 22
Vanilla redux is not set up for handling this type of operation right out of the box. 23
So how do we handle these asynchronous action creators. 24
How do we make asynchronous requests. 25
That's where redux thung comes into play. 26
The purpose of redux thung is to give us direct control over the dispatch method the dispatch method 27
is a method a part of the redux store that contains or application state in this cycle diagram. 28
You can really think of the dispatch method as handling everything essentially on the bottom right hand 29
corner when we normally call an action Creator and it returns an action the action ends up being passed 30
into this dispatch method. 31
So this is really one of those things that has been working behind the scenes all along. 32
You have been using the dispatch method in any vanilla redux application you've already been using. 33
We've already been making use of the dispatch. 34
You can really think of this dispatch as a big funnel of sorts we call an action creator. 35
It returns an action and this action kind of falls into our dispatch which makes sure that the action 36
gets sent off to all of our different reducers. 37
So you can kind of imagine as being a big funnel or a pipe we throw an action into it and out comes 38
some new state. 39
On the other side. 40
So let's see how redux thunk works in process and in practice. 41
I have a small re-act application already wired up this re-act application just fetches a list of users 42
and then renders a single life for each user. 43
In particular we're showing the users email and name. 44
And so it's a pretty straightforward application on the redux side of things. 45
I have a single action creator called fetch users. 46
The purpose of Fettes users is to make a single API request and then in theory return that data back 47
to our reducers. 48
And so I've got a comment right here right now that just says that vanilla redox expects us to return 49
a simple action here. 50
And so this is a rule that we don't really want to have to obey when we have a request object here. 51
I do not yet have any data to return from this function. 52
I have to wait for my request to resolve before I actually have any data to send across to my dispatch 53
method. 54
So let's make use of redux thunk. 55
The first thing we're going to do with redux thung is we need to realize that the all of the existing 56
rules for action critter's kind of go out the window. 57
Vanilla redux expects us to return in action which is a plain javascript object redux thunk on the other 58
hand enables one other return type and that is a plain javascript function. 59
So only with redux thung are we able to return a plain javascript function like this. 60
The first argument to this function that I just added is going to be dispatch method and as a reminder 61
the dispatch method is essentially that big funnel or that big pipe. 62
If we pass an action into dispatch it's going to be sent off to all of our different reducers. 63
So let's write a little bit of code here to complete the exercise and then do a walkthrough on exactly 64
what it does. 65
I'm going to wait for my request to resolve with some amount of data and then only when the request 66
has actually resolved. 67
Am I going to dispatch an action. 68
In my case it's going to have type fetch profiles and payload of data. 69
Now let's give this a shot in the browser and then come back and walk through this code that I just 70
added over in the browser. 71
I'm going to refresh my page. 72
I wait for half a second and the request completes and I now have visible to my. 73
To me the list of users with all of the respective email addresses. 74
So this is data that's coming across from some API that's already been set up but that was a little 75
bit of code that we put down without actually discussing what's going on so let's do a quick discussion 76
. 77
Here's a sequence of events of what's going on behind the scenes right now are out. 78
Component is calling an action creator called fetch users. 79
And so that's happening inside of apts. 80
JS whenever the component is about to mount it automatically calls the fetch user's action creator. 81
Next ASIO's is making requests to our API so we can see that here on line for X-post is automatically 82
reaching out to the API. 83
Grabbing some amount of Jaison and returning it to us usually all of our action creators are expected 84
to return a plain javascript object but because we're using redux thunk we get this additional return 85
type from our action creator of a function. 86
So rather than returning a plain object here on returning a function redux thunk which is our middleware 87
sees that this is a function and not a plain action and immediately invokes the function with the dispatch 88
method. 89
Some amount of time passes in which where you can kind of imagine that we're kind of sitting around 90
here inside of the function and then finally the request is going to resolve some amount of unknown 91
time. 92
Or it could be 100 milliseconds or it could be a whole second. 93
We don't really know. 94
Once our request resolves with our data we then finally call the dispatch method with our action that 95
we want to send off to our reducers. 96
So this is how redux thunk is actually working behind the scenes. 97
If you'd like to video this video click on the link and the description to go to rally coding dot com 98
and sign up for my e-mail list. 99
My name is Steven Greider and once a week I publish videos on the re-act redux and Javascript ecosystem 100
and I'd love to share them with you. 101
Happy coding