In the previous lesson,
we have seen how we can effect changes to the state in the store,
by dispatching Redux actions.
Now sometimes when you dispatch a Redux action,
you may want to intercept it on its way to the tool and make
some modifications to the action before letting it pass through on to the store.
Now this is where the Redux Middleware and Redux Thunk come to our help.
Let's examine this in a little more detail in
this lecture and then in the exercises that follow in this lesson.
So, what exactly is Redux Middleware?
And what role does it play in our Redux application?
The Redux Middleware provides the capability to run a code after an action is dispatched.
As I said in the introduction before it reaches the reducer.
Now once an action reaches the reducer,
the reducer will act on the action and make changes to the state of the store.
So before that point,
you can intercept action and effect some changes before the action reaches the reducer.
So this is a place which enables
third party extensions to be injected into your Redux application.
So for example, if you want to log all the actions that have been dispatched,
that is a good point for you to first capture the action,
log what the action is and then let it move on to the reducer,
and then you can then log the state of the application after the action is effected.
Now, this is one example of a situation where a middleware will be effective in capturing
information about what is going on within your Redux application.
Similarly, if you want to allow asynchronous API calls, so for example,
you dispatch an action but the action would initially require access to
a server from radio fetch the data and then send the data into your Redux store.
Then that is also a good place to interject a middleware in order to
intercept the action and then carry out basing API call and
then let the action proceed forward into the store.
So, how does this middleware work?
So this middleware forms a pipeline that wraps around the dispatch.
So as you saw, when you need to send an action to that store,
you dispatch the action to the store.
So this wraps it on the dispatch and then
it can make any changes there and it can pass that action forward.
If it requires, it can restart the dispatch pipeline as it is required.
And not only that, at that point,
you even get access to the store state.
If you want to look at the store state and then
make any modifications before you let the action pass through.
So that is what the middleware gets access to.
So what can we use the middleware for?
So here are the few examples of things that you can do
with the middleware that you interject into your Redux application.
So the middleware can be typically used for
inspecting the action and then also the state.
You can even modify the action,
you can dispatch all that actions and then wait for the results from
those actions before you allow this particular action to take place,
you could even stop an action from reaching the reducers if it
is something that you wish to do, and so on.
So there are many applications for a middleware that allow you to achieve your end goal.
Then you need to use the middleware in
your Redux application then you use
that applied middleware function that is available from Redux,
and so this will enable you to set up the middleware pipeline,
and then this returns a store enhancer.
So when you call ''Apply middleware,'' it will return
a store enhancer which you can then pass in as
a parameter to the create store function that we have
already seen being used when we created the store.
So that is how we will apply them middleware for our application.
Let's now talk about thunk.
That sounds terrible, right.
Like something falling out of the sky onto your head.
If that is what you think thunk is,
then you will thank me at the end of this lecture for changing your thinking on thunk.
So what exactly is thunk?
So thunk is in programming.
What we mean by thunk is a subroutine that is used to
inject an additional calculation into another subroutine.
So this is a way to delay a calculation and its result is
needed and also allows you to insert
operations at the beginning or the end of another subroutine.
Now that may not make much sense to you at this moment but when we look at Redux Thunk,
then it'll become a lot more understandable about what exactly the purpose
of thunk is in the context of a Redux application.
So let's talk about Redux Thunk.
So what exactly does Redux Thunk do for you?
A Redux Thunk is a middleware.
So again this is one kind of a middleware that allows you to
write an action creator that will return a function instead of an action.
Now if you recall the way you wrote action creators
earlier in the exercise in the previous lesson,
the action creator was returning an action object and then we were
passing that action object through the dispatch to the store.
Now a thunk allows you to return a function from an action creator.
Now when you return a function from an action creator,
then that function can be executed and within that function,
you can design it in such a way that you can use it to delay the dispatch of an action.
So for example, you can delay the dispatch of an action until a certain condition is met.
Say for example, if you want to do a synchronous API call to a server,
you may use a thunk in order to generate a synchronous API call,
and then when the server replies and you receive the reply,
at that point you can let the action proceed
forward and then make modifications to the store.
So this is a good example of where a thunk or a Redux Thunk will be very useful for us.
So the inner the function,
so as yours as you saw,
a thunk is a function that returns a function.
So the inner function that you define inside a thunk
gets access to both the dispatch as well as get state store.
What does this permit you to do?
Because you have access to get state,
you can examine the state and then see if
this action fits and can be allowed with the current state.
So that would allow you to even modify the action,
and also you'll get access to dispatch.
So for example, you can stop the current action,
do something else, come back and then dispatch the action into the reducers.
So that is what a Redux Thunk allows you to do.
Now with the availability of Redux Thunk,
it allows you to do complex synchronous logic.
So for example with one action,
you can actually end up dispatching multiple dispatches and
may cause multiple effects if that is what you intend to do.
You can even do conditional dispatch depending on the condition.
So for example, if you issue an synchronous API call to the server,
and if the server returns the result successfully,
then you can dispatch one action to the reducer.
If the API call returns a failure,
then you can dispatch a different action to
the reducer to make changes to the state accordingly.
So this kind of thing is easily supported by using a Redux Thunk.
Indeed, this is exactly how we will make use of Redux Thunk in the exercise in
this lesson and also later on when we look at communicating with a server.
Also, Redux Thunk supports simple synchronous logic and so that is
where doing simple async calls to a server can easily be supported using Redux Thunk.
If you want a more powerful way of doing things,
then we have access to another library called a Redux Saga.
Now, I'm not going to go into a Redux Sagas in this course,
that is a little too advanced for us in this course.
So we will only stay with Redux Thunk.
A Redux Saga allows you to use ES6 generators to generate possible functions.
Now from the examples that we look at in this course,
we don't need that complex asynchronous logic
so I'm not going to go into Redux Saga at this moment.
We will differ that to an advanced course later on.
And also, the saga allows
ongoing background thread like operations or processing behavior if you so require.
So complex react applications that require that kind of behavior
would definitely benefit by using a Redux Saga in the place of a Redux Thunk.
But for the simple example is that we've a look at,
a Redux Thunk is more than sufficient to cover
all the essentials that we need for our Redux application.
With this quick understanding of Redux Thunk,
let's move on to the exercise where we will apply
the Redux Thunk and we will see what we will achieve by using a Redux Thunk.