Hey guys, so in this episode of react Redux series we gonna look at a special middleware called
Redux, thunk in the last tutorial we'll bill I own a little middleware
But obviously you don't want to go about building your own bit over so you should be using the one that is already available
So there are multiple options. There's also redux saga and there are a couple of other options
Also available, but this two are pretty famous. So today we're gonna look at
Redux thunk and in subsequent tutorials, we might look at redux saga. This video is part of the much larger series on
React and so if you're not following it, I would highly suggest you should do that
I'll provide a link here and welcome to tech see tutorials
Alright so before we start let's try to understand what is the meaning of a redux funk
Especially the word thunk somebody explained to me a thunk means
past tense of
Think I don't know if it's true or not, but in JavaScript world
Thunk means if you're gonna execute something a statement instead of just executing right there
Wrap it with a function. And so you have to call the function to exit which returns that statement
And so that's how you execute it. And so that's what it means and
in this case
Remember you we have dispatch actions. So instead of dispatching action right there. We're gonna wrap it
with a function a thunk and
Then we're gonna call that function to return those actions and that's how it's gonna work
All right to start with I'm going to use one of one of the example that I used in a previous tutorial
if you want to download it you can do so and also provided in the description so you can download it and
Clone this and again when I run this example
I have two buttons action age up and age down
which changes in label and increments this by one when I click on up and
Decrements, and by one when I click down and if I look at the code it has an app
GS has two buttons and a label
I have two actions Asia and h-town
And then I have a reducer
where it's take that action and increments is based on the the action and the state is pretty simple just
one property called age
Okay, so let's modify this to
to build our middleware using react and attacks thunk so as I said before
Thunk is nothing but you take the action and instead of executed right away. You just wrap it with a function
Okay, so that's what we're gonna do inside the app KS. I have this two action
Which is nothing, but just object that it it dispatches, right? So instead of just
Dispatching those objects. I am going to wrap around this with a function. So
So to in order to create it, we need to name it action creator because that's what are actually doing. It creating actions, right?
So in the store, I am going to create a folder
call
Actions and the reducer I'm also going to create another folder called
Reducers and I'm just gonna put the reducer inside there and inside the for the action
Inside the actions I'm going to create a file called
Actions GS and this is where we gonna write our action creators
All right. So, let's write our first action
We will look at the the thunk in a minute, but first we need to convert this into
Action all the action to action Creator. Alright, so I'm just gonna copy this H up from here and
Inside the action G is I'm going to create a function
Const H
Equal to it's scenario function
That returns that object. So I'm just gonna put it here and
for the for the value here one I can pass that value here and
so this would be about
So this is our H up
action
creator basically
Because it when I run this it would return this object which we can use inside the app das
Alright, since we created it. We need to also export it and similarly I can copy this and
Here and this would be age
downfall and here this will be
Down so now in inside the app GS
Inside of you instead of using this action, we're gonna use the action creator to create this action
So we need to import that action creator so I'm gonna say import
action
creator from store
Actions
actions and
Instead of dispatching this
I'm going to say action creator dot H up
and
I'm gonna execute this function and provide one here same thing for this
action creator
dot H
down and pass one here
but here instead of this I have to say
Everything is action creator. So now it's time to install
Body ducks talk so from the command line. I'm going to say
Npm install
- - save redux
Ok now that its installed let's make sure that's inside the package Jason I would have the redux thunk here
Alright, that's great. Now why should we install this?
So it has to happen inside the index.js file. So here I would have to
Import thunk from redux.
and I also need
From redux I need to have
Apply middleware so we can apply the middleware to this project and inside the create store
With the reducer argument. We also need to pass another argument
Where we execute this function of climate over and pass
Thunk inside so that's all you need to do in terms of Redux on basically
import tonch import apply middleware and then pass this argument you and that should
Plug it in. Alright, so I'm just gonna
Run the NPM start just to make sure everything works fine
All right. So everything still works fine. I can click on this button. See all we did here is just move instead of
actions we
Create an action creator and via that we are now a calling action, but we haven't done anything asynchronous
So let's try to do that now. So what I'm going to do is I have two actions here age up in h-town
so age up I wanna
Make an asynchronous
But age down I want to keep it synchronous so I can see the difference
So I'm going to call this
ASIC
But
What I call I'm not gonna call this directly. I'm just gonna still have to call a synchronous event
So for that, I would have to create another one
called
age up
Which will have the value as previous one inside
Once it captures the action it would return
another function which will have
Dispatch again, all of these has taken care of by
The redux thunk so you don't have to worry about it
You just need to make sure that when you do something asynchronous, this is the pattern you follow
so here when I call the age up, it will dispatch it will return another function and
Here we can cap. We can capture our
Action and do something with it. So what I'm gonna do in order to do something is synchronous
I'm just going to use a set timeout and said timeout as we know as
a function inside that runs when you run the set timeout and then it would have some
Delay runs after certain sec second. So in this case, it's
5,000 millisecond, which means five second and what I'm gonna do is now I'm gonna call this age of
Async function from here
So I already have the dispatch so I capture the action and I'm going to dispatch
this
age async
Function. Oh, I also need to call this function
Now if I run this
When I click on this button it's not gonna run right away it's gonna run after five seconds
so basically what happens the action get dispatch and
then it's gets its get caught by this age of function which dispatch which catches the action and
after five seconds
Dispatch is another action
Which actually reaches the the reducer which is this? Okay?
So when I click here, it should run after five seconds. So
One one thousand two one thousand three one thousand four one thousand five one thousand
Yeah around five seconds, right so you can see it increase now
It would be nice if if I can see if I when I when I click here I need to have some loading
Logo or something?
so think of this as if I'm saving this saving this value onto the server and when it comes back either it could be
Successful or a failure, right? So if it's a successful, I would go and save this
Continuous action to the reducer if it's fail if it fails then I shoulda stopped it here
So it never reaches the reducer and so it never updates a state right and it could do something else also
Alright, so when you create this project there is a logo dot SVG
Which is comes with the with the whole package, so I'm gonna use that. So if I go to my app, yes
Here I'm gonna add another
property in this state called
loading and this should be
state dot
loading and this loading we need to trigger when I click on the age up button and once it
Reaches the reducer it should take it off or where basically it should hide the loading right? So here what I need to do is
prop start
Loading that's true. Then conditionally render the the logo
which is nothing but image and
Source equal to logo in the class name equal to
Alright so but we need to import this logo here so we would say import
From
SVG
Which is nothing, but this and it's basically SVG let the react logo
I need to create another action on the top here
I'm going to call it export
Const
Loading this would basically return
Type is
Loading and we haven't created this action yet
So in the so in the reducer we can add another case called
loading and this would do nothing but
New state dot
Loading equal to true
Alright so when I click on it it would basically
Show the logo
and now I need to call to action so that would happen since it's it's a a
We want to keep it as a synchronous action. I can actually call it here. So one action I'm calling H up
Async here. Also I can call
dispatch and
loading
Alright so this is this is a synchronous and this is a synchronous
Alright, so let's look at it
How it works. So if I click on here it
Actually loads it but there's an issue. Oh, yeah the source supposed to be the
Interpolated not the string. Otherwise, it would not show up. So now if I click on here it shows a logo but
It doesn't go after five seconds, so we need to we need to take it away after five second one B
When it reaches the reducer so in the reducer, so we already know when it reaches the reducer we should just take it off
Right. So when I click click on the age up event and when it reaches the reducer it should simply
just
makes a new state dot
loading equal to
false
Right, so now if I click on here it shows up and as soon as this increments to
421 it goes away and also the cool thing about this is when it
When I catch the action and dispatch it again after
The timeout I can actually change the its value so I can say well
Plus plus and it would instead of incrementing by one it would increment by 2
Just to show you. I mean it doesn't make sense in this case, but just to show you how it works
So now if it's 20 here if I click on here
The logo shows up and then it would insert of 1 it didn't really cover by 2 so it becomes 22, okay
So you can change the action here, ok, so that's all folks
But in the next tutorial we will instead of using the simple set timer
We might we will do actually interaction with server. So we try to say something on a server and then
So basically try to do get in post
So we're gonna look at a little bit more practical example than this simple example
But I think is important to understand this using a simple example
so you get the concept and then you move on to a bit complex example, and by the way, feel free to
Follow the entire series. I provide a link here and I hope you learned something from this tutorial and if you did
Please like don't forget to Like
Comment and subscribe and you can also help the channel via patreon. I'll provide a link here
And also you can translate this video for me. If you can to your native language, it's pretty simple the
Instruction is in the description
Thank you