1 00:00:00,890 --> 00:00:05,130 Now that we've got our stream reduced or hooked up it's time to actually give the thing a quick test. 2 00:00:05,240 --> 00:00:10,460 So to test this we're going to wire up an action creator called to our streamlets component any time 3 00:00:10,460 --> 00:00:12,330 our streamlet component is rendered on the screen. 4 00:00:12,350 --> 00:00:16,460 We're going to attempt to fetch a list of all of our different streams so that essentially means that 5 00:00:16,460 --> 00:00:21,730 we're going to call the appropriate action creator from our actions index dodgiest file. 6 00:00:21,740 --> 00:00:25,750 So in this case we probably want to call fetch streams plural. 7 00:00:25,760 --> 00:00:26,030 All right. 8 00:00:26,030 --> 00:00:30,780 So inside my component's directory I'll open up streams and then find a stream list. 9 00:00:30,890 --> 00:00:32,230 Yes. 10 00:00:32,330 --> 00:00:35,510 So at present we just have this functional component at the very top. 11 00:00:35,510 --> 00:00:44,450 I'm going to import the connect helper from re-act redux and I will import my action creator called 12 00:00:44,750 --> 00:00:45,740 fetch. 13 00:00:45,740 --> 00:00:46,290 Where is it. 14 00:00:46,310 --> 00:00:47,900 Oh I lost it. 15 00:00:47,930 --> 00:00:51,500 Here we go fetch stream's. 16 00:00:51,940 --> 00:00:59,950 So I'm going to import fetch streams from up to directory's actions and then we will wire this thing 17 00:00:59,950 --> 00:01:01,110 up at the very bottom. 18 00:01:01,270 --> 00:01:02,870 So I'll do my connect. 19 00:01:03,040 --> 00:01:06,600 We do not yet have a map stage props but we will in just a little bit. 20 00:01:06,670 --> 00:01:11,710 So passing NULL as the first argument and then as a second argument will do fetch stream's inside of 21 00:01:11,710 --> 00:01:12,890 an object like so. 22 00:01:13,150 --> 00:01:14,500 Now again can't see it enough. 23 00:01:14,500 --> 00:01:15,450 Notice the s on. 24 00:01:15,450 --> 00:01:17,980 Here we are fetching multiple streams. 25 00:01:19,780 --> 00:01:24,480 Now in place of the functional component we are going to place a class based component instead. 26 00:01:24,520 --> 00:01:28,330 The reason that we are going to use a class based component is that we want to color action creator 27 00:01:28,480 --> 00:01:29,710 inside of the component. 28 00:01:29,710 --> 00:01:34,490 Did mt life cycle method because we only want to attend to fetch our list of streams. 29 00:01:34,540 --> 00:01:42,930 One time Zaal put class stream lists extends re-act component. 30 00:01:43,540 --> 00:01:49,450 I will put my render method inside of year with the div of stream list more or less like what we had 31 00:01:49,450 --> 00:01:50,400 before. 32 00:01:50,530 --> 00:01:52,200 And then I will define my component. 33 00:01:52,220 --> 00:01:58,640 Did mt life cycle method and inside there we can call this Propst start fetch streams. 34 00:01:58,840 --> 00:02:00,580 And that's pretty much it. 35 00:02:00,580 --> 00:02:05,440 So at this point we're just looking at the actual creator and then use our redux dept tools to see the 36 00:02:05,440 --> 00:02:10,780 actual list of streams appear inside of our reducer or inside of our redux state. 37 00:02:11,130 --> 00:02:13,390 So I going to save this. 38 00:02:13,960 --> 00:02:19,780 I'm going to make sure that my client server is running and my API server is running as well and then 39 00:02:19,780 --> 00:02:23,770 I'll flip back over to my application inside the browser. 40 00:02:23,770 --> 00:02:28,600 I can do a quick refresh here just to make sure the refresh kicked in and then I will open up my redux 41 00:02:28,600 --> 00:02:29,520 dev tools. 42 00:02:29,590 --> 00:02:32,330 Now again make sure that you click on the state button right here. 43 00:02:32,410 --> 00:02:35,550 Usually by default it's going to show you the diff tab. 44 00:02:35,980 --> 00:02:37,650 So I can go over to state. 45 00:02:37,660 --> 00:02:43,660 I can then click on streams and I'll see my two streams that I have created appear right here. 46 00:02:43,660 --> 00:02:44,400 Perfect. 47 00:02:44,420 --> 00:02:47,350 So that's a list of all the streams from our API server. 48 00:02:47,380 --> 00:02:50,890 Notice the structure of the streams piece of state. 49 00:02:50,890 --> 00:02:54,140 This is a object as we've been discussing. 50 00:02:54,310 --> 00:02:59,860 The key of the first object right here is one because the stream ID for that is one as well. 51 00:03:00,080 --> 00:03:02,220 And I see the title and description on there. 52 00:03:02,410 --> 00:03:03,790 Then for the second key value pair of. 53 00:03:03,790 --> 00:03:09,250 Got a key of 2 because it is pointing to the stream with ID 2 and I see all the relevant details for 54 00:03:09,280 --> 00:03:11,500 string number two on there as well. 55 00:03:11,500 --> 00:03:13,120 All right so this looks pretty darn good. 56 00:03:13,120 --> 00:03:14,500 Let's take a quick pause right here. 57 00:03:14,530 --> 00:03:18,610 When we come back the next section we're going to start to put together a better render method for the 58 00:03:18,610 --> 00:03:23,350 stream list and make sure that it looks a little bit more like the mockup So we took a look at previously. 59 00:03:23,350 --> 00:03:25,410 So quick posin I'll see you in just a minute.