1
00:00:00,600 --> 00:00:04,840
In the last video we had a discussion around how we're going to fetch data inside of a redux app.

2
00:00:04,990 --> 00:00:08,740
So now that we have a better idea of what's going on let's flip back over to our code editor and we're

3
00:00:08,740 --> 00:00:11,170
going to start putting all this stuff together.

4
00:00:11,170 --> 00:00:16,720
All right so going to first begin by creating a new folder inside my sarcy directory called actions

5
00:00:17,200 --> 00:00:22,030
and inside of that directory I'm going to make a new file called index Scace us.

6
00:00:22,030 --> 00:00:25,130
So eventually inside of here we're going to put our action creators.

7
00:00:25,420 --> 00:00:30,130
Right now let's just put together kind of like a stub of an action creator just to kind of have something

8
00:00:30,130 --> 00:00:34,630
that we could import back over to our posts list and make sure that we call it any time that our component

9
00:00:34,630 --> 00:00:37,810
is mounted on the screen or gets rendered to the screen.

10
00:00:37,810 --> 00:00:41,710
So inside if you're going to say export Konst that posts

11
00:00:44,940 --> 00:00:54,720
right now I'll just return a action with a type of something like batch posts like so that'll do for

12
00:00:54,720 --> 00:00:56,050
right now.

13
00:00:56,070 --> 00:01:00,060
Now let's make sure that we can wire this up to our component and call it any time that our component

14
00:01:00,060 --> 00:01:01,540
is rendered on the screen.

15
00:01:01,640 --> 00:01:07,860
So going to change back over to my post list component to wire our action creator up to this thing we

16
00:01:07,860 --> 00:01:11,600
have to import the connect function from reactor redux.

17
00:01:11,700 --> 00:01:19,050
And we also have to import that fetch posts action creator that we just made and excuse me the import

18
00:01:19,050 --> 00:01:25,920
path right here is going to be dot dot slash actions like the Senao done you're an export default.

19
00:01:26,180 --> 00:01:29,710
We can put together our connect function.

20
00:01:29,760 --> 00:01:33,410
Now remember we do not have a map state to prop's function right now.

21
00:01:33,420 --> 00:01:38,630
We will eventually but at present there is no state or no data that we want to get into this component.

22
00:01:38,850 --> 00:01:42,970
Nonetheless we still have to pass in a first argument to the connect function.

23
00:01:42,990 --> 00:01:48,540
The first argument is always going to be Mount St. to prop's But in this case because we do not have

24
00:01:48,540 --> 00:01:53,910
a map state to prop's function I'm going to just pass in no to indicate that we don't have any state

25
00:01:53,940 --> 00:01:56,250
that we want to get into this component.

26
00:01:56,270 --> 00:01:59,970
So now I can pass in my action Creator as the second argument.

27
00:01:59,970 --> 00:02:07,710
So I'll say Fetch posts is fetch posts and remember we can use a little bit of yes 20:15 syntax to shorten

28
00:02:07,710 --> 00:02:12,950
this up to just fetch posts like so.

29
00:02:12,990 --> 00:02:16,260
All right so now inside of our component we can define the component.

30
00:02:16,260 --> 00:02:21,410
Did mt life cycle method Saray above render all say component.

31
00:02:21,430 --> 00:02:23,830
Did mount an inside there.

32
00:02:23,830 --> 00:02:28,760
I will call this stop Propst start fetch posts.

33
00:02:28,790 --> 00:02:33,450
Ok so now the instant our component is rendered on the screen we should be calling our action creator

34
00:02:34,640 --> 00:02:38,870
so our action creator fecche post will be called at present it's going to return in action with type

35
00:02:38,870 --> 00:02:42,620
fecche posts and that's pretty much it for right now.

36
00:02:42,620 --> 00:02:46,730
Now if we felt like over we can test this out just very quickly and just make sure we don't have any

37
00:02:46,730 --> 00:02:48,430
error messages or anything like that.

38
00:02:48,560 --> 00:02:50,160
OK so looks like we're just fine here.

39
00:02:51,190 --> 00:02:52,670
Now take another quick pause.

40
00:02:52,690 --> 00:02:56,920
When we come back the next section we're going to wire up our request over to that J some placeholder

41
00:02:56,920 --> 00:02:59,110
API inside of our action creator.

42
00:02:59,110 --> 00:03:00,760
So quick pause and I'll see you in just a minute.