1
00:00:00,910 --> 00:00:04,930
Now that we have our AP server put together we need to make sure that any time that the user submits

2
00:00:04,930 --> 00:00:11,050
our form from the stream create components we attempt to make Ajax request or a network request over

3
00:00:11,050 --> 00:00:15,460
to our API running on localhost three thousand and one.

4
00:00:15,520 --> 00:00:20,250
So to make a network request we're going to first define an action creator.

5
00:00:20,260 --> 00:00:25,050
We're going to make sure that we wire up that action creator to our component 3D connect helper.

6
00:00:25,390 --> 00:00:28,480
We're going to call the action creator from on Samit right here.

7
00:00:28,480 --> 00:00:33,530
And then the action creator is going to use accedes to make the network request over to our API.

8
00:00:33,820 --> 00:00:34,900
So let's get to it.

9
00:00:34,900 --> 00:00:39,490
Now we got a little bit of set up to do the first thing I'm going to do is change back over to my react

10
00:00:39,490 --> 00:00:41,570
application running inside the terminal.

11
00:00:41,650 --> 00:00:48,820
I'm going to stop this thing and I'm going to install X-posts and redux thunk because we're going to

12
00:00:48,820 --> 00:00:52,420
need both those to write out an asynchronous action creator.

13
00:00:52,420 --> 00:00:54,940
So I'll let that do its thing in a while that runs.

14
00:00:54,940 --> 00:00:59,990
I'm going to flip back over to my actions index such as file.

15
00:01:00,150 --> 00:01:05,930
Now at the very top We're going to first import ASIO's from X-posts.

16
00:01:06,300 --> 00:01:09,810
And you know what actually well it's full of the same pattern that we've been using all along.

17
00:01:09,810 --> 00:01:12,330
Let's create a separate directory called API.

18
00:01:12,510 --> 00:01:14,870
That's going to create an instance of Access.

19
00:01:14,880 --> 00:01:17,060
So I'm going to remove that import statement right there.

20
00:01:18,380 --> 00:01:23,770
And then inside of my SIRC directory I'm going to make a new folder called API.

21
00:01:24,270 --> 00:01:27,850
And then inside there I'll make a new file called stream's.

22
00:01:28,050 --> 00:01:28,960
Yes.

23
00:01:29,010 --> 00:01:33,390
So inside of your we're going to create our instance of X-ers and then export it same way that we've

24
00:01:33,390 --> 00:01:34,710
done all along.

25
00:01:35,070 --> 00:01:44,180
So I need to import X-posts from X-posts and they'll do an export default X-ers dot create and I'll

26
00:01:44,180 --> 00:01:45,410
set up as usual.

27
00:01:45,440 --> 00:01:47,410
The base you are l.

28
00:01:47,450 --> 00:01:53,330
So the base you are l for our API server is localhost three thousand one and we can verify that by going

29
00:01:53,330 --> 00:01:57,710
back over to our second terminal window and making sure that we see home local those three thousand

30
00:01:57,710 --> 00:02:00,900
one right here.

31
00:02:00,900 --> 00:02:08,820
So from my base you are all put in HTP colon slash slash local host 3000 and one.

32
00:02:08,980 --> 00:02:10,540
It's now all save streams.

33
00:02:10,590 --> 00:02:13,410
Yes I'll close that file.

34
00:02:13,410 --> 00:02:18,300
I'm going to go back over to my actions index such as file and at the top we will import that streams

35
00:02:18,390 --> 00:02:21,880
API X-ers instance.

36
00:02:22,180 --> 00:02:22,770
All right.

37
00:02:22,770 --> 00:02:32,880
So at the top import streams from up one directory API is streams so we can now use this Acciona instance

38
00:02:32,880 --> 00:02:35,610
right here to make requests over to our API.

39
00:02:35,610 --> 00:02:37,770
Let's create a new action creator inside of your.

40
00:02:37,770 --> 00:02:39,790
To handle this creation.

41
00:02:40,000 --> 00:02:45,160
So down here I'm going to say export Konst create stream.

42
00:02:45,190 --> 00:02:50,140
This is going to be called with a list of all those different values that we entered into our form as

43
00:02:50,140 --> 00:02:51,380
an argument.

44
00:02:51,550 --> 00:02:58,280
So I'm going to receive that as an argument for action creator that I will call about form values and

45
00:02:58,280 --> 00:03:01,700
then we're going to define an asynchronous action creator.

46
00:03:01,700 --> 00:03:06,140
Remember any time we make an asynchronous action creator we are making use of redux thunk.

47
00:03:06,200 --> 00:03:12,470
So we want to return an arrow function from our action creator and the first argument to this function

48
00:03:12,500 --> 00:03:15,380
is going to be the dispatch function.

49
00:03:15,470 --> 00:03:19,040
Now we call that we can shorten up the syntax that you see here just a little bit.

50
00:03:19,160 --> 00:03:24,740
So I can remove the outer curly braces so that went up there and the bottom line down here and then

51
00:03:24,740 --> 00:03:30,350
I can remove the return statement and put this all onto one line like so.

52
00:03:32,780 --> 00:03:38,620
And then optionally because I only have one argument on both sides I can remove the parentheses.

53
00:03:40,180 --> 00:03:43,990
And then finally because the inner function is probably going to have some code that wants to use the

54
00:03:43,990 --> 00:03:50,220
async await syntax going to put the async E-word in front of dispatch.

55
00:03:50,430 --> 00:03:58,320
So then finally inside if you're going to say streams post I'm going to make a request to the streams

56
00:03:58,320 --> 00:04:05,960
and point at localhost three thousand one and I'm going to try to put in all of my different form values.

57
00:04:06,260 --> 00:04:09,340
So that's how we make a post request with X-ers right there.

58
00:04:10,680 --> 00:04:10,950
All right.

59
00:04:10,950 --> 00:04:13,840
So let's now flip back over to what stream creates.

60
00:04:14,040 --> 00:04:18,870
We're going to hook up this action creator to that component and then we'll attempt to cull it and notice

61
00:04:18,870 --> 00:04:21,300
that right now we are not dispatching any action.

62
00:04:21,300 --> 00:04:22,640
We are not awaiting this thing.

63
00:04:22,650 --> 00:04:23,650
Anything like that.

64
00:04:23,730 --> 00:04:26,690
We're going to come back and add a lot of that stuff in in just a little bit.

65
00:04:26,760 --> 00:04:31,370
For right now I just want to make sure that we can successfully create a new stream on our API.

66
00:04:32,270 --> 00:04:32,510
All right.

67
00:04:32,510 --> 00:04:34,770
So I going to save this file.

68
00:04:35,000 --> 00:04:38,510
I'll flip back over to stream create at the top.

69
00:04:38,510 --> 00:04:46,760
I'm going to import connect from re-act redux and I'm going to import my action creator as well.

70
00:04:46,790 --> 00:04:48,620
So we call that create stream

71
00:04:52,130 --> 00:04:55,660
from and this time the import statement is going to be a little bit complicated.

72
00:04:55,670 --> 00:04:58,990
We want to go up to directory's and then get our actions folder.

73
00:04:59,030 --> 00:05:06,640
So I'm going to go up wonder factory up a second directory and then get actions like so then we'll go

74
00:05:06,640 --> 00:05:10,740
down to the very bottom and we need to look at that connect function.

75
00:05:11,010 --> 00:05:13,330
Well there's a little bit of an issue here.

76
00:05:13,330 --> 00:05:18,920
Notice how we have already wired up redux form in the exact same way as the connect function.

77
00:05:18,940 --> 00:05:21,430
So it kind of seems like we're at a little bit of an impasse here.

78
00:05:21,430 --> 00:05:25,350
How can we wire up both connect and redux form at the same time.

79
00:05:25,520 --> 00:05:29,470
Well let's take a little quick pause here and I'll show you how we can very easily combine together

80
00:05:29,500 --> 00:05:34,570
both the connect function and redux forum with some pretty simple syntax so quick but I'll see you in

81
00:05:34,570 --> 00:05:35,250
just a minute.