1
00:00:00,630 --> 00:00:05,790
In the last video we learned about a little bit of new syntax so we can use to dynamically out in new

2
00:00:05,790 --> 00:00:10,110
key value pairs to an object so that we understand all the syntax we're going to start to work on our

3
00:00:10,170 --> 00:00:12,630
real stream reducer to get started.

4
00:00:12,630 --> 00:00:15,040
I'm going to delete this temporary file I created.

5
00:00:15,530 --> 00:00:17,340
I'll then find my reducers directory.

6
00:00:17,370 --> 00:00:22,050
And inside there I'll make a new file called stream reducer.

7
00:00:22,520 --> 00:00:23,790
Yes.

8
00:00:23,920 --> 00:00:30,950
And then inside if your will first begin by importing our actions file or some of the action types file.

9
00:00:31,210 --> 00:00:38,040
So I'm going to import a couple of different types from up one directory actions types.

10
00:00:38,050 --> 00:00:42,040
Now we're going to get a couple of different types like I said we're going to want to handle all these

11
00:00:42,040 --> 00:00:43,880
different stream types.

12
00:00:43,930 --> 00:00:44,860
So create stream.

13
00:00:44,860 --> 00:00:45,500
Fetch.

14
00:00:45,550 --> 00:00:49,050
Fetch streams delete stream and stream as well.

15
00:00:49,090 --> 00:00:51,320
So I'm going to import each of those.

16
00:00:51,550 --> 00:00:55,360
So I'll do a fetch stream.

17
00:00:55,690 --> 00:01:06,260
I'll do a fetch stream's create stream edit stream and delete stream as well.

18
00:01:09,130 --> 00:01:13,340
Then after that I'll add in some boilerplate for a reducer.

19
00:01:13,420 --> 00:01:18,340
So I'm going to export default state which we defaulted to be an empty object.

20
00:01:18,360 --> 00:01:23,160
I'll receive my action and then inside appear we will set up our switch statement so I can switch over

21
00:01:23,170 --> 00:01:29,370
action type and I'll set up my default case with return state right away.

22
00:01:30,450 --> 00:01:35,110
OK so now we want to set up separate case statements to handle each of these different types.

23
00:01:35,130 --> 00:01:40,200
Right here now as a quick reminder each of those different types maps up to a different response we

24
00:01:40,200 --> 00:01:41,500
get back from our API.

25
00:01:41,730 --> 00:01:47,550
So in other words when we see an action with the type of fetch streams specifically with the US that

26
00:01:47,550 --> 00:01:52,290
means that we are getting back an array of records and we are going to want to take that array of records

27
00:01:52,320 --> 00:01:55,270
and merge them all into our state object.

28
00:01:55,380 --> 00:01:57,500
In the case of getting a single record.

29
00:01:57,570 --> 00:02:03,330
So that would be the type of fat stream where in the case of creating a record or updating a record

30
00:02:03,590 --> 00:02:05,960
so that would be create an edit right here.

31
00:02:06,000 --> 00:02:10,920
We are getting back single records so we're going to want to take those single records and merge them

32
00:02:10,920 --> 00:02:12,190
into our redux.

33
00:02:12,350 --> 00:02:12,780
Or just me.

34
00:02:12,780 --> 00:02:14,660
Our state object as well.

35
00:02:14,670 --> 00:02:18,740
And then finally in the case of deleting a record we get back nothing from the API.

36
00:02:18,810 --> 00:02:24,640
And in that case we want to find the appropriate ID inside of our object and remove that key value pair.

37
00:02:24,990 --> 00:02:28,890
So essentially at the end of the day all I'm really saying here is is that we're going to be following

38
00:02:28,890 --> 00:02:33,330
the same kind of conventions around updating and working with an object that we spoke about previously

39
00:02:33,350 --> 00:02:40,220
and side of or sets foot back over the first case we're going to handle is fetch stream singular.

40
00:02:40,290 --> 00:02:42,190
So just one stream.

41
00:02:42,390 --> 00:02:47,280
So I will add in a new case of fetch Stream.

42
00:02:47,340 --> 00:02:51,780
Now again notice there is no s on here we are doing singular fette stream.

43
00:02:51,780 --> 00:02:58,080
So in this case I want to take my entire state object I want to create a new object and take everything

44
00:02:58,080 --> 00:03:00,240
out the existing one and add it in like so.

45
00:03:00,510 --> 00:03:02,320
So again this is what is going to satisfy.

46
00:03:02,340 --> 00:03:06,770
Redux is requirement of always returning a new object.

47
00:03:07,650 --> 00:03:12,680
Then the string that we actually want to add in is going to be on the action payload property.

48
00:03:13,530 --> 00:03:20,040
So we want to make sure that we designate an ID from that action payload as our key and the value will

49
00:03:20,040 --> 00:03:22,330
be the actual stream itself.

50
00:03:22,530 --> 00:03:23,810
So I would use that new syntax.

51
00:03:23,820 --> 00:03:25,970
We just spoke about in the last video.

52
00:03:26,190 --> 00:03:35,580
So put in my square brackets action payload ID and then I'm going to assign that a value of action.

53
00:03:35,640 --> 00:03:40,280
Payload like so.

54
00:03:41,140 --> 00:03:42,890
So take a look at what is happening here.

55
00:03:42,910 --> 00:03:47,950
Anytime that we get a action with tight fed Stream we're going to take our state object take all the

56
00:03:47,950 --> 00:03:51,430
properties or all the key value pairs out of it and add it to the new object.

57
00:03:51,610 --> 00:03:55,180
And then we're going to dynamically add a new key value pair on the fly.

58
00:03:55,600 --> 00:04:00,660
It's going to have a key of the streams ID and a value of the actual stream itself.

59
00:04:01,000 --> 00:04:01,800
And that's pretty much it.

60
00:04:01,810 --> 00:04:05,580
That's all the code we have to write for handling getting a news stream.

61
00:04:05,600 --> 00:04:08,210
So let's now do the same thing for creating a stream.

62
00:04:08,290 --> 00:04:13,990
Remember when we create a stream the response we get back from our API is again going to be a single

63
00:04:14,020 --> 00:04:14,740
record.

64
00:04:14,740 --> 00:04:18,910
So we want to take that single record and add it into our state object.

65
00:04:18,910 --> 00:04:21,820
So I would write out something like this.

66
00:04:21,820 --> 00:04:29,520
I would say case create stream I will return a empty object with dot dot dot state.

67
00:04:29,890 --> 00:04:32,830
And again I will take out of that action Palit property.

68
00:04:32,830 --> 00:04:40,000
The idea of the string that was just created so action payload ID and assign it a value of action payload

69
00:04:41,070 --> 00:04:41,720
and so you'll notice.

70
00:04:41,730 --> 00:04:42,210
Yeah.

71
00:04:42,480 --> 00:04:47,970
They end up being identical because we're just taking whatever payload is inside there and adding it

72
00:04:48,000 --> 00:04:51,940
as a new key value pair on our state object.

73
00:04:51,940 --> 00:04:56,150
So now let's do the same thing for editing or updating a record as well.

74
00:04:56,160 --> 00:05:02,010
So again we get back a single record from our API and I want to take that single record in added into

75
00:05:02,010 --> 00:05:03,280
our state object.

76
00:05:03,630 --> 00:05:09,160
So I can do a case edit stream and it's going to have the same syntax we just saw a moment ago.

77
00:05:09,540 --> 00:05:15,030
So I do return new object dot dot dot state square bracket action.

78
00:05:15,030 --> 00:05:21,680
Payload Id close off the square brackets to get the colon and then action dot payload.

79
00:05:21,800 --> 00:05:25,050
Yup totally identical in all three cases.

80
00:05:25,050 --> 00:05:28,680
So in all three cases we are getting back a single record from our API.

81
00:05:28,680 --> 00:05:31,980
We want to take that record and add it into our state object.

82
00:05:32,040 --> 00:05:37,560
So it ends up being identical for fetching a single stream creating a stream and editing a stream as

83
00:05:37,560 --> 00:05:37,990
well.

84
00:05:38,760 --> 00:05:40,730
OK so this looks pretty great.

85
00:05:41,340 --> 00:05:47,940
Now when we add in a bunch of different records at a in a single go or when we delete a record the syntax

86
00:05:47,970 --> 00:05:51,600
or the steps that we're going to use is just going to be a little bit different.

87
00:05:51,600 --> 00:05:55,920
So let's take a pause right here and we'll figure out how we are going to delete a record and add in

88
00:05:55,920 --> 00:05:59,260
a bunch of records to our state object in a single line of code.

89
00:05:59,430 --> 00:06:01,600
So quick poznań see you in just a minute.