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