1
00:00:00,850 --> 00:00:06,040
In the last section we finished up our delete post action creator and tested it out inside the browser.

2
00:00:06,040 --> 00:00:10,140
We did get a little bit of an error because we didn't actually define the type that we were using.

3
00:00:10,150 --> 00:00:13,220
So it says delete posts is not defined.

4
00:00:13,270 --> 00:00:15,580
Let's flip back over to our Creator file.

5
00:00:15,580 --> 00:00:17,000
So here's that typewrite here.

6
00:00:16,990 --> 00:00:26,060
And yet we just never defined it at the top so we'll go on to and find our type section will say expert

7
00:00:26,070 --> 00:00:31,850
Konst delete posts is delete post like so.

8
00:00:32,280 --> 00:00:34,340
OK let's do one more test.

9
00:00:34,380 --> 00:00:37,240
Back inside the browser or refresh the page.

10
00:00:37,440 --> 00:00:44,820
I'll go to my post and get my request log up here and I'll delete a post.

11
00:00:44,830 --> 00:00:46,270
Cool looks good.

12
00:00:46,680 --> 00:00:49,220
Now one thing I want to mention about our current approach.

13
00:00:49,350 --> 00:00:55,380
We are really relying upon our Rifat So the list of posts right here to get the deleted post to get

14
00:00:55,380 --> 00:00:58,180
out of our application state right.

15
00:00:58,260 --> 00:01:04,230
If we go to this particular post when I click on delete post when ever that request is completed when

16
00:01:04,230 --> 00:01:09,930
the deletion request is completed we automatically navigate back to our list of posts but when we do

17
00:01:09,930 --> 00:01:16,860
so our big list of posts like all the different post we have in local memory still includes the deleted

18
00:01:16,860 --> 00:01:18,600
one and so we're doing that.

19
00:01:18,600 --> 00:01:21,200
Follow up requests right here.

20
00:01:21,270 --> 00:01:27,930
Here's the follow up request to fetch the new list of posts which by now has the deleted one not present

21
00:01:27,960 --> 00:01:31,130
the delete the one is not reflected in the list anymore.

22
00:01:32,070 --> 00:01:37,470
So we're kind of exploiting a little technicality here to get around our local state management.

23
00:01:37,470 --> 00:01:41,910
I think that to do things correctly we should really make sure that we update our local state as well

24
00:01:42,180 --> 00:01:43,960
whenever a post is deleted.

25
00:01:44,160 --> 00:01:49,350
It's going to make sure that the UI is just very slightly snap year for our users which might be really

26
00:01:49,350 --> 00:01:57,450
important if they're on a slow internet connection so let's go back to our reducer that is recording

27
00:01:57,450 --> 00:01:58,580
our list of posts.

28
00:01:58,620 --> 00:02:00,760
So here's REDUCE-IT post right here.

29
00:02:01,230 --> 00:02:09,360
We will import the delete post type that we just added and then we'll add on another case statement

30
00:02:09,870 --> 00:02:12,890
to handle the case where we are deleting a post.

31
00:02:13,290 --> 00:02:19,770
Now in this case remember that the action action is payload contains the idea of the post that we just

32
00:02:19,770 --> 00:02:20,600
delete it.

33
00:02:20,640 --> 00:02:27,000
So all we really need to do is reach into our state object and get rid of the key and the value that

34
00:02:27,000 --> 00:02:30,480
match that particular ID to do so.

35
00:02:30,510 --> 00:02:34,430
We can use a little helper out of the low dash library called omit.

36
00:02:34,770 --> 00:02:42,870
So return underscore dot omit will pass in our state and then as the second argument we're going to

37
00:02:42,870 --> 00:02:46,890
pass an action docked pay load.

38
00:02:46,890 --> 00:02:50,530
So what this does right here is it says look at the state object.

39
00:02:50,790 --> 00:02:58,680
If the state object has a key of the posts Id just drop it.

40
00:02:58,740 --> 00:03:04,280
Just omitted from that object and return a new object that does not contain that ID anymore.

41
00:03:04,680 --> 00:03:10,740
So this does not modify the existing state object and returns a new state object with that particular

42
00:03:10,740 --> 00:03:11,110
post.

43
00:03:11,130 --> 00:03:13,270
Id not present any more.

44
00:03:13,800 --> 00:03:18,730
So this is part of what's so great about using an object rather than an array for state management.

45
00:03:18,750 --> 00:03:24,390
You can imagine that if you were using an array here we would have to write in like a reject function

46
00:03:24,420 --> 00:03:28,860
so it probably would have looked something like reject state.

47
00:03:28,940 --> 00:03:29,260
I don't know.

48
00:03:29,270 --> 00:03:29,750
Post.

49
00:03:29,750 --> 00:03:33,020
Post equal legal action.

50
00:03:33,030 --> 00:03:33,700
Payload.

51
00:03:33,720 --> 00:03:38,820
So if we had a state object of an array we would have ended up with something like this right here which

52
00:03:38,820 --> 00:03:42,140
is definitely not quite as legible I think.

53
00:03:42,210 --> 00:03:45,680
I think that omit is a little bit more obvious as to what's going on.

54
00:03:45,680 --> 00:03:47,940
And actually this would be posted ID.

55
00:03:48,260 --> 00:03:52,840
So I do like using personally an object as our application level state.

56
00:03:53,440 --> 00:03:56,750
OK let's test this out and see how we're doing.

57
00:03:56,760 --> 00:04:03,990
I'll refresh the page and we will delete this post and right away we see that things just get out there

58
00:04:03,990 --> 00:04:06,030
and we're good to go.

59
00:04:06,790 --> 00:04:10,450
OK so I think that about wraps up this application.

60
00:04:10,470 --> 00:04:14,090
Let's do a quick review and talk about some of the big highlights of this app.

61
00:04:16,660 --> 00:04:22,670
Inside of our source directory I'm going to open up our top level index js file inside of here.

62
00:04:22,670 --> 00:04:29,450
We made use of re-act router Dom in particular the browser router the routes and the switch components

63
00:04:29,840 --> 00:04:34,760
to give our application the aspect of the idea of navigation.

64
00:04:34,910 --> 00:04:40,130
We created separate routes for each individual component inside of our application and we tied each

65
00:04:40,130 --> 00:04:46,070
of those components to a particular path whenever a user navigates to one of these paths will show this

66
00:04:46,070 --> 00:04:47,940
particular component.

67
00:04:47,960 --> 00:04:53,900
So the real interesting aspect to this real interesting idea is that we're really not changing HTL documents

68
00:04:54,260 --> 00:04:59,180
we're just hiding and showing different sets of re-act components to give the user the impression that

69
00:04:59,180 --> 00:05:01,280
they're navigating around our application.

70
00:05:03,540 --> 00:05:09,840
The route component takes a path and that path can have some wildcards inside of it that we specified

71
00:05:09,840 --> 00:05:11,800
by saying Colin.

72
00:05:11,880 --> 00:05:14,050
And then the name of the wildcard.

73
00:05:14,310 --> 00:05:19,980
This is a very important piece of application state and it's one very good reason to think about how

74
00:05:19,980 --> 00:05:24,990
to best interact or integrate it with with our redux store as well.

75
00:05:24,990 --> 00:05:32,230
One very good place where we made use of this I.D. was inside of the post show component inside a post

76
00:05:32,280 --> 00:05:37,920
so we made reference to that idea coming from the you are out all over the place because we really cared

77
00:05:37,920 --> 00:05:43,400
about what the particular post the user ID was trying to look at.

78
00:05:43,410 --> 00:05:49,830
One other big challenge that we tackled inside of here was making use of re-act router with action creators.

79
00:05:49,960 --> 00:05:55,350
So with re-act router we have the ability to very easily navigate around programmatically with code

80
00:05:55,380 --> 00:05:59,280
that is written inside of a component.

81
00:05:59,460 --> 00:06:04,620
As soon as you start to put code outside of components while navigating around starts to get a little

82
00:06:04,620 --> 00:06:05,800
bit more challenging.

83
00:06:05,940 --> 00:06:11,580
And so one of the best ways of handling that is by passing around callbacks to our action creators that

84
00:06:11,580 --> 00:06:17,050
will take care of the navigation after the actual creator has completed executing.

85
00:06:17,190 --> 00:06:22,860
The other big thing that we take took use of are made use of inside of here was the own props system

86
00:06:23,190 --> 00:06:24,960
with MAP state to prop's.

87
00:06:25,110 --> 00:06:30,930
Remember that this second argument to map state to prop's is the set of props that is going to the target

88
00:06:30,930 --> 00:06:37,590
component and so that makes map stage props a really great place to do some intermediate level of calculation

89
00:06:37,590 --> 00:06:41,100
or do some look up or something like that inside of here.

90
00:06:41,220 --> 00:06:47,490
One of the later videos or bonus videos inside this course is all about a library called wristlet de-select

91
00:06:47,490 --> 00:06:53,670
excuse me and reast like makes extensive use of doing some intermediate calculations inside of maps

92
00:06:53,850 --> 00:06:54,980
to prop's right here.

93
00:06:55,020 --> 00:06:57,910
So I really do recommend that you check out that video.

94
00:06:58,770 --> 00:07:06,540
Finally we also inside of our producer which we just took care of this section we made use of map keys

95
00:07:06,610 --> 00:07:13,380
or we did this previously excuse me Mityas of the map keys Helprin here to treat our state object as

96
00:07:13,380 --> 00:07:17,010
a object rather than an array with an object.

97
00:07:17,010 --> 00:07:23,190
We get some very fast very easy and look up of records and it also makes maintaining fetching the same

98
00:07:23,190 --> 00:07:26,850
record over and over again much more straight.

99
00:07:26,880 --> 00:07:32,570
For example remember how were fetching an individual post here with the fence post case.

100
00:07:32,790 --> 00:07:36,730
And while were talking about this I got to clean up the comment we left behind.

101
00:07:36,810 --> 00:07:42,670
So with fecche post right here it was very easy to take all of our existing states and then add in this

102
00:07:42,690 --> 00:07:45,710
additional record to that object as well.

103
00:07:45,720 --> 00:07:52,050
Now if we keep going back to the same post over and over the existing post that already exists inside

104
00:07:52,050 --> 00:07:57,300
of our state object is just getting overwritten by this segment right here.

105
00:07:57,330 --> 00:08:03,540
So if there is say a post with ID of 5 already and our state object and we re fetch that post again

106
00:08:04,020 --> 00:08:08,030
that post with ID file will be overwritten by this one right here.

107
00:08:08,130 --> 00:08:14,670
And so making use of updates to our state object is so much easier with this approach than using an

108
00:08:14,670 --> 00:08:20,420
array because if we had an array we couldn't just add on or keep concatenating on these new posts are

109
00:08:20,430 --> 00:08:21,360
fetching.

110
00:08:21,360 --> 00:08:27,390
We would first have to go and find the post with ID of 5 remove it out of that array and then add in

111
00:08:27,390 --> 00:08:28,950
the new one.

112
00:08:28,950 --> 00:08:35,250
So in practice I really recommend checking out using an object to use as your storage for data inside

113
00:08:35,250 --> 00:08:35,950
your state.

114
00:08:36,210 --> 00:08:40,470
And I also have another bonus video at the end of this course as well that talks a little bit more about

115
00:08:40,470 --> 00:08:46,820
some of the fine grained details of using an object as your application level state as well.

116
00:08:46,890 --> 00:08:49,720
So I hope that you enjoyed this application.

117
00:08:49,720 --> 00:08:51,350
It was a lot of fun to put together.

118
00:08:51,510 --> 00:08:56,070
I do recommend that you continue on and check out some of the bonus videos because theres a lot of very

119
00:08:56,070 --> 00:09:00,770
particular one off topics that didn't quite fit into any of the applications that we covered.

120
00:09:00,960 --> 00:09:06,120
And a lot of those topics you'll find are really useful for working on your own personal projects.

121
00:09:06,150 --> 00:09:08,490
So I recommend you go and check them out.

122
00:09:08,490 --> 00:09:09,120
Talk to you later.