This is the first video in a series on how to initiate data loading in a react in redux application 2
. 3
We've talked about loading data in the past and redux applications we usually call an action creator 4
an action creator might use a HTTP request library like say axios to make an Ajax request to some backend 5
server where the request will be handled handled. 6
We'll get some response and the response will end up in the reducer and the reducer will then update 7
our state with the new data that we got back from the server. 8
So this is what happens whenever we want to make an Ajax request. 9
But what happens before this. 10
How do we call this action creator. 11
There's several different ways in the redux world to call this action creator whenever we want to make 12
an Ajax request or whenever we want to fetch some data some of them are a little bit more organized 13
than others some of them are certainly easier than others. 14
Ruby talked about one very specific way of fetching data in a reactor redux application today. 15
So just to be clear the question I want to ask here is something needs to call an action creator whomever 16
you want to fetch our data. 17
So what exactly is that. 18
What are we what are we calling what at what point in our application are we going to call the action 19
creator. 20
So one of the most common methods of loading data or initiate this loading of data is to stick a call 21
to an actually Kreator in component will mount which will be placed inside of any of your given Riyadh's 22
components. 23
We could also place a follow up call inside of component will update. 24
And so if the component is about to update we need to fetch some new data. 25
We can then call an action creator from there as well. 26
Now this is a very popular pattern and so popular in fact that even the re-act router documentation 27
recommends that you call your action creators from component will mount but I'm going to argue today 28
that this is not a very good pattern. 29
It's not the best pattern in the world for creating reusable components. 30
Let's talk about why I've got a simple application right now that loads a series of images these series 31
of images are given via your Elle's that are provided by Ajax endpoints so whenever I come to my route 32
slash photos I need to first make an Ajax request to find out all the different images I need to load 33
and then I map over that list of images and place one image tag on the screen for each. 34
So let's take a look at the component that's generating this code or generated that age s.m.m. 35
So here's my photos component. 36
You can see that I've got a helper method to render photos where I take a list of photos and for each 37
one I render an image tag. 38
And here's the source of the the image itself thumbnail you are l. 39
So this assumes that hey I've already got my data in place and you can see right above it. 40
I have a component will mount that initiates that data loading process. 41
So again I'm going to argue that placing component will mount with a action creator inside a component 42
like so isn't the best practice in the world. 43
And the reason for that is that if I want to reuse this component somewhere else in my application maybe 44
I've got another page where I want to show a what I've called the user list in this case it's really 45
a photo list and they want to show another one of these components somewhere else in my application 46
. 47
As soon as I placed this component somewhere else my application I am implicitly saying yes I want to 48
refresh my list of photos whenever this complains about to should be shown reforged my list of photos 49
. 50
And so if I want to reuse this component all over the place maybe I've got several different types of 51
photos I want to show several or several different types of lists in every single case. 52
I would be really fetching my photos which is very possibly not something I want to do. 53
So sticking calls toward action caters to fetch data inside of lifecycle methods. 54
It definitely works but it does not lead to reusable components. 55
So let's investigate a slightly different way of loading up our data. 56
I'm going to suggest that instead of sticking a call into component will amount to fetch our data. 57
We're going to use re-act routers on inter callback to initiate our action creator to load some data 58
this on enter that I've listed right here is a callback that's provided by re-act router that's attached 59
to a individual routes inside of our application. 60
I'm going to flip over to the reactor at her docs really quick. 61
I'm on the API page with all the docs about all the different API is. 62
And so one of the possible props so we can pass to a route component that will define inside our router 63
is the on enter and I just lost it oh where to go. 64
There you go is the on wrencher callback. 65
And so if we pass a function to the on wrencher prop on enter prop for a single route that function 66
will be called whenever the route is about to be entered. 67
And so I would argue that perhaps this is a better place to load our data when our users are about to 68
go to slash photos. 69
That probably means I need to load my data right now so soon as someone is going to slash photos I need 70
to load my list of photos and that should not necessarily be tied to an individual component. 71
Maybe I just want to have it tied to this route slash photos so we can use as an entry callback right 72
here so we know that whenever a user is about to go to route slash photos we need to call an action 73
creator and go fetch our list of photos. 74
So let's do some refactoring to our application and see what this looks like in practice. 75
First I'm going to remove the fecche photos action creator from our component and I no longer need to 76
import my actions at the top because I'm not calling any action creators. 77
And at the bottom I'm also going to remove the passive action of actions to the connect helper's well 78
. 79
So already this component looks a little bit smaller and certainly a little bit more reusable as well 80
. 81
Now it just takes a list of photos renderers them and that's it. 82
Hundred percent reusable. 83
All over the place. 84
Now for step two step two is to add in on end to call back to my photos route handler. 85
So right now inside of my route's file you can see that I've got my router here and whenever someone 86
visits photos I should show the photos component. 87
I'm going to create a new folder or sees me a new file to hold my callback here and call it route callbacks 88
. 89
Jay Yes. 90
Now inside here I'm going to import my redux store which I've already instantiated in another file and 91
I'm also going to import my fetch photos action creator from my actions file. 92
Now I'm going to declare a function that will be called whenever someone is about to enter the photos 93
route inside of here. 94
I'm going to dispatch my action creator 95
and that's pretty much it. 96
So whenever this photo is executed Erstein whenever this function is executed I'm going to call my fetch 97
photos action creator and past the action directly to store dispatch. 98
If you're not familiar with store dispatch I recommend you go check out my video on redux thunked and 99
it walks you through what dispatch does in great detail. 100
So if dispatch is a little bit mysterious go check out my video on reducto thunk and I bet you'll get 101
it pretty quickly. 102
So now I just need to make sure that this function right here is called whenever someone is about to 103
visit that photos route. 104
So back inside of my route's file I will import on photos. 105
Enter from Route callbacks and finally the very last step. 106
Whenever someone is about to visit the route photos. 107
So on enter on photos enter like so. 108
So let's test this out in the browser and flip back over. 109
Will refresh the page. 110
Sometimes this AP input API endpoint is a little bit slow so I'll give it a minute. 111
But hey look it looks like it worked out. 112
Everything is just fine. 113
So my action Kreator to fetch my photos is still being called Whenever I hit my photos route. 114
Now with this refactor I know that I can change up what component I show when someone hits the photos 115
route and I'm guaranteed that I'm still going to have access to my photos data. 116
By the time they get inside of here I'm also left with a much more reusable photo's component so I can 117
reuse this thing in the future and not have to worry about this thing trying to fetch its own data every 118
time it's rendered to the screen. 119
So again this is one method for loading data inside of reactor redox application and there are several 120
others using lifecycle methods is not inherently bad but there are other alternatives that it really 121
pays to be aware of. 122
You might want to use on your own application. 123
If you enjoy this video I recommend you check out my web site Rallye coating dot com. 124
We have weekly videos on Javascript topics focused on the reactor redux ecosystem. 125
Check it out. 126
Sign up for the email list. 127
I'll send you email email once so once a week with one new video. 128
Always something interesting so I'll catch you in one week from now. 129
We're going to talk about some more data loading methods.