1
00:00:00,930 --> 00:00:04,770
Now you've got a working back and endpoint to return our list of surveys.

2
00:00:04,800 --> 00:00:07,390
We're going to start wiring up our front end application.

3
00:00:07,650 --> 00:00:14,070
Now as we start to integrate this into the front end this is a pretty basic use of redux and react.

4
00:00:14,070 --> 00:00:18,560
So we're going to go through this pretty quickly without you know any particular order.

5
00:00:18,570 --> 00:00:21,240
We're just going to start the actual creator we'll make our type.

6
00:00:21,250 --> 00:00:23,970
We'll put a producer together and all that kind of good stuff.

7
00:00:23,970 --> 00:00:26,130
So let's get to it.

8
00:00:26,130 --> 00:00:28,680
I'm going to first start off by finding my client directory.

9
00:00:29,060 --> 00:00:34,820
I'm going to open up my SIRC directory and then open up our actions folder inside of here.

10
00:00:34,830 --> 00:00:40,870
We'll start off by first making a new type of type fetch service or something like that.

11
00:00:40,920 --> 00:00:45,630
I don't know let's say export cons let's call it fetch surveys.

12
00:00:45,630 --> 00:00:49,420
That definitely follows our existing nomenclature here.

13
00:00:49,500 --> 00:00:52,600
So say Fetch surveys like so.

14
00:00:53,250 --> 00:00:53,640
OK.

15
00:00:53,670 --> 00:00:55,050
So here is our new type.

16
00:00:55,050 --> 00:00:59,820
So we're going to create an action creator that will make our network request the backend it will get

17
00:00:59,820 --> 00:01:07,080
the list of surveys iller return in action or dispatch in action we should say of type fecche users

18
00:01:07,650 --> 00:01:13,080
and then it will be up to us to create a new reducer to catch the data that is being captured by the

19
00:01:13,080 --> 00:01:14,890
request.

20
00:01:14,940 --> 00:01:21,770
So we'll now open up our actions index not file and put together our action creator at the top.

21
00:01:21,870 --> 00:01:30,510
First import our type of fetch surveys and then scroll down to the bottom of the file where we will

22
00:01:30,510 --> 00:01:32,910
make our new action creator.

23
00:01:32,920 --> 00:01:38,680
So Dan here will say export Konst fetch surveys.

24
00:01:38,820 --> 00:01:41,990
Now this is definitely going to be an asynchronous action creator.

25
00:01:42,000 --> 00:01:46,100
So it's going to have a very similar signature to the ones we've already put together.

26
00:01:46,110 --> 00:01:50,910
I don't expect this action creator to need any arguments since we're just saying hey give me a list

27
00:01:50,910 --> 00:01:55,570
of all of our surveys without any real type of search criteria in there.

28
00:01:55,680 --> 00:02:03,390
So we'll put down our first arrow function which will turn an asynchronous function and then inside

29
00:02:03,390 --> 00:02:08,500
of here we're going to place our logic to actually fetch all the surveys from our backend.

30
00:02:08,710 --> 00:02:20,230
So say Konst response or wait Actio Scott get slash API slash surveys.

31
00:02:20,690 --> 00:02:30,440
Then we'll dispatch our action of type fetch surveys and we'll give it a payload of the list of surveys

32
00:02:30,440 --> 00:02:33,190
that we've just got back from this request right here.

33
00:02:33,200 --> 00:02:36,560
So payload of Rez data.

34
00:02:36,710 --> 00:02:42,340
So the payload will be an array that contains all the different surveys that our current user has made.

35
00:02:43,010 --> 00:02:43,400
OK.

36
00:02:43,430 --> 00:02:45,520
So I think that's pretty much it for action creator.

37
00:02:45,520 --> 00:02:46,940
Definitely not that bad.

38
00:02:47,240 --> 00:02:53,540
So let's now create our reducer and the reducers sole purpose is going to be to watch for this type

39
00:02:53,540 --> 00:02:58,370
right here and return the list of surveys.

40
00:02:58,370 --> 00:03:07,060
So inside my reducers directory I'm going to make a new file called surveys reducer.

41
00:03:07,350 --> 00:03:18,110
We'll start off by importing our fetch surveys type let's say import batch surveys from up one directory

42
00:03:18,680 --> 00:03:21,880
into actions types.

43
00:03:21,920 --> 00:03:26,760
Now do remember that our types file exports many different types.

44
00:03:26,810 --> 00:03:31,310
So we need to use the curly braces here to capture the very specific type that we want to get out of

45
00:03:31,310 --> 00:03:32,490
there.

46
00:03:33,440 --> 00:03:36,360
All right now we can create an export reducer.

47
00:03:36,440 --> 00:03:41,980
So here's what it looks like inside of our author douceur Yep usual boilerplate for reducer.

48
00:03:41,990 --> 00:03:43,580
Nothing too crazy.

49
00:03:43,580 --> 00:03:47,180
So we'll say export default function.

50
00:03:47,180 --> 00:03:53,690
We're going to have a first argument of our state object and a second of the action.

51
00:03:53,690 --> 00:03:59,150
Now we want to make sure that we default our state object that is being produced by this reducer.

52
00:03:59,210 --> 00:04:04,220
And so since this reducers should always be returning a list of surveys I think that will say that by

53
00:04:04,220 --> 00:04:07,830
default this reduce or return an empty array.

54
00:04:08,120 --> 00:04:13,430
So when the application first puts up our surveys piece of state will be an empty array.

55
00:04:13,520 --> 00:04:18,890
And then once we finish the request to get our list of surveys it will then be the fully populated array

56
00:04:18,890 --> 00:04:21,320
with all the surveys in it.

57
00:04:21,320 --> 00:04:28,460
Now we can do our switch statement over action type and we'll say that when action type is equal to

58
00:04:29,510 --> 00:04:37,670
match surveys pretty straightforward chust turn action dot payload and it will also handle the default

59
00:04:37,670 --> 00:04:42,730
case with the return of state.

60
00:04:42,860 --> 00:04:45,360
OK so here's our producer looking pretty good.

61
00:04:45,390 --> 00:04:51,470
Last thing we have to take care of is going to be wiring this reducer up to our combined reducers call

62
00:04:51,680 --> 00:04:55,160
inside of the reducers index J.S. file.

63
00:04:55,170 --> 00:05:05,280
So pop that thing open will import our survey reducer from survey reducer and then we will assign it

64
00:05:05,340 --> 00:05:07,400
inside of our combined reducers call.

65
00:05:07,750 --> 00:05:11,080
I make sure I get a comma after our form line.

66
00:05:11,460 --> 00:05:18,420
Now I will say that the surveys piece of state will be produced by the survey reducer and you and I

67
00:05:18,480 --> 00:05:21,650
before we write that out I just realized we made a small typo here.

68
00:05:21,750 --> 00:05:24,430
We called the file surveys reducer.

69
00:05:24,630 --> 00:05:27,090
But in this import saving right here is said to survey.

70
00:05:27,090 --> 00:05:29,870
So we want specifically surveys plural.

71
00:05:30,210 --> 00:05:33,510
So make sure surveys and surveys.

72
00:05:33,510 --> 00:05:34,470
OK.

73
00:05:35,350 --> 00:05:38,300
So surveys reducer.

74
00:05:38,340 --> 00:05:38,760
All right.

75
00:05:38,760 --> 00:05:40,680
I think that's pretty much it.

76
00:05:40,680 --> 00:05:44,570
So at this point we have really wired up the redux side of fetching all these surveys.

77
00:05:44,700 --> 00:05:46,110
Let's now take a quick break.

78
00:05:46,110 --> 00:05:50,220
When we come back in the next section we'll make sure that whenever the dashboard component is shown

79
00:05:50,220 --> 00:05:56,850
on the screen it attempts to load up the list of surveys by calling this fetch surveys action creator.

80
00:05:57,120 --> 00:05:59,180
So it's take care of that in the next video.

81
00:05:59,210 --> 00:06:00,080
See in just a minute.