1

00:00:01,140  -->  00:00:07,800
Source applications we're going pretty darn well we can see a list of posts we can navigate to one we

2

00:00:07,800  -->  00:00:09,310
can delete if we want.

3

00:00:09,390  -->  00:00:14,850
We can navigate back around we can add a post we can cancel everything that you would expect out of

4

00:00:14,850  -->  00:00:17,390
a normal blogging program like this.

5

00:00:17,550  -->  00:00:22,260
It takes just a second to cover some of the hypo points about this application specifically some of

6

00:00:22,260  -->  00:00:24,840
the more confusing ones.

7

00:00:25,320  -->  00:00:29,330
First let's talk about re-act router and what it did for us.

8

00:00:29,430  -->  00:00:35,040
Re-act router took over the process of figuring out what components needed to be rendered on the screen

9

00:00:35,040  -->  00:00:36,700
at any given time.

10

00:00:36,780  -->  00:00:42,660
It did this by taking a look at the current U R L and then referencing that with our routes that we

11

00:00:42,660  -->  00:00:47,580
define inside and outside us we define a couple of different routes.

12

00:00:47,580  -->  00:00:54,600
First off we always said always show the component that was our very core container the entire application

13

00:00:55,860  -->  00:00:57,980
app had just one job.

14

00:00:58,080  -->  00:01:00,720
It would show any children component.

15

00:01:01,140  -->  00:01:07,920
So whenever we navigated navigated to some nested component like say post slash News-New or post slash

16

00:01:07,920  -->  00:01:14,270
ID that component will be passed into app and then app would render that component in addition to itself

17

00:01:15,720  -->  00:01:19,140
whenever a user navigated to just forward slash.

18

00:01:19,140  -->  00:01:26,520
We use the index route helper to make sure that we showed the post index components the index route

19

00:01:26,570  -->  00:01:31,560
is showed whenever we navigate to just forward slash right here.

20

00:01:32,580  -->  00:01:38,970
Next we made sure that we made use of re-act router by displaying re-act router in place of our app

21

00:01:38,970  -->  00:01:44,020
component where we had it previously inside of our index Stut JS file right here.

22

00:01:44,280  -->  00:01:50,460
We define router and also passed in our route's configuration object in addition to the browser history

23

00:01:50,460  -->  00:01:56,760
object browser history just says hey use the entire you are l whenever you're trying to figure out where

24

00:01:56,760  -->  00:01:57,540
you are.

25

00:01:57,960  -->  00:02:04,050
If we want it we can also use the hash history object which is very similar just slightly different

26

00:02:04,050  -->  00:02:07,440
in that it uses everything to the left to the right.

27

00:02:07,440  -->  00:02:12,890
Excuse me of a hash and you were able to figure out where it currently is.

28

00:02:13,710  -->  00:02:18,420
Next we defined a handful of action creators we're in a lot of surprise.

29

00:02:18,420  -->  00:02:20,140
There weren't a lot of surprises here.

30

00:02:20,160  -->  00:02:22,530
A lot of them are just normal API requests.

31

00:02:22,620  -->  00:02:24,930
Very similar to how we've made before.

32

00:02:24,930  -->  00:02:30,450
The only difference was that this time around we also did a post request and a delete request in here

33

00:02:30,450  -->  00:02:33,890
so that we could actually make changes to our remote data.

34

00:02:34,290  -->  00:02:38,880
But overall this is a lot of stuff we'd already worked with before.

35

00:02:39,270  -->  00:02:47,180
Next our producer again read our posts reducer was pretty darn similar to what we've seen before.

36

00:02:47,220  -->  00:02:52,270
We just had two pieces of state a all which contain all of our POWs.

37

00:02:52,620  -->  00:02:57,060
But keep in mind that if those posts are not contained the content property.

38

00:02:57,390  -->  00:03:04,200
And then we also had a single individual post kind of the active post if you will.

39

00:03:04,200  -->  00:03:11,850
We then made three different containers index new and show index responsible for showing data to the

40

00:03:11,850  -->  00:03:14,850
user or a list of all of the blog posts.

41

00:03:14,850  -->  00:03:20,130
The one interesting thing about index was that it loaded its data as soon as it knew that it was about

42

00:03:20,130  -->  00:03:25,700
to be rendered to the DOM by placing the auction creator inside of component will mount.

43

00:03:25,890  -->  00:03:30,600
So whenever we were about to render this to the Dom the component would automatically attempt to go

44

00:03:30,600  -->  00:03:34,970
in and fetch its own data for itself.

45

00:03:35,070  -->  00:03:40,860
Once this component was showing a list of blog posts we were able to navigate to an individual blog

46

00:03:40,860  -->  00:03:47,820
post by using the link tag provided by re-act router link tag is used just like any other component

47

00:03:48,370  -->  00:03:53,400
and it really produces just a normal anchor tag on the page.

48

00:03:53,580  -->  00:03:56,810
There wasn't too much else going on inside of index start but.

49

00:03:56,870  -->  00:03:59,230
This is a pretty straightforward component.

50

00:03:59,520  -->  00:04:06,210
Next post-up show this one was probably the second most difficult component we did right after index

51

00:04:06,210  -->  00:04:06,450
.

52

00:04:06,450  -->  00:04:12,180
So again this was another component that fetched its own data and the one twist here was that it needed

53

00:04:12,210  -->  00:04:19,680
a parameter out of the eye out of the U R L to figure out what individual post it wanted to fetch.

54

00:04:19,680  -->  00:04:24,930
This component was also in charge of deleting posts and we made sure that after a user successfully

55

00:04:24,930  -->  00:04:29,920
deleted that post we would navigate them back to the index route.

56

00:04:30,000  -->  00:04:36,690
Finally PPOs knew this was definitely the most confusing component that we put together in this entire

57

00:04:36,690  -->  00:04:41,830
section mostly because it used a lot of new different concepts.

58

00:04:42,000  -->  00:04:44,980
First we included our link tag.

59

00:04:45,120  -->  00:04:54,150
We had a redux form and thirdly we also had our contacts for navigating our user around the application

60

00:04:54,150  -->  00:04:55,780
programmatically.

61

00:04:55,800  -->  00:05:00,760
One of the most interesting aspects of this of this component was redux form.

62

00:05:01,030  -->  00:05:10,920
I remember at the bottom we set up some configuration for this form specifically named the form and

63

00:05:10,920  -->  00:05:14,610
then we told it which fields it was going to be in in charge of.

64

00:05:14,670  -->  00:05:23,050
We also did find a validation function then for each of our different fields that we defined we created

65

00:05:23,160  -->  00:05:25,960
input or a textarea.

66

00:05:26,070  -->  00:05:32,640
In the case of the content and we made sure that we passed in the fields configuration object provided

67

00:05:32,640  -->  00:05:39,960
by redux form that made sure that reducto form was a 100 percent in charge of handling all the all the

68

00:05:39,960  -->  00:05:43,550
changes and events emitted from this input right here.

69

00:05:43,560  -->  00:05:46,440
We also use redux form for handling validation.

70

00:05:46,860  -->  00:05:53,700
Specifically we made sure that we showed in the air if it existed for each individual input only after

71

00:05:53,700  -->  00:05:57,780
the user had interacted with the input in some fashion.

72

00:05:57,780  -->  00:06:02,370
Finally we made sure that we highlighted the entire form and the error message or seeing the entire

73

00:06:02,370  -->  00:06:04,420
field and its error message read.

74

00:06:04,740  -->  00:06:13,560
If the user had touched it and if the particular field was not valid if they had passed validation.

75

00:06:13,560  -->  00:06:16,440
So this is definitely a pretty confusing little component right here.

76

00:06:16,590  -->  00:06:21,260
But the good news is that everything that we did in here is almost 100 percent reproducible.

77

00:06:21,390  -->  00:06:26,880
Whenever you create your own form you're always going to end up having very similar structure.

78

00:06:26,880  -->  00:06:34,620
You'll define the name of your form the fields you'll divine define your validation function and then

79

00:06:34,620  -->  00:06:39,750
you just need to make sure that you connect redux form with the individual form inputs.

80

00:06:39,960  -->  00:06:41,460
Not too bad.

81

00:06:42,210  -->  00:06:42,930
OK.

82

00:06:43,080  -->  00:06:46,050
So I think this has been a fantastic little application.

83

00:06:46,050  -->  00:06:51,390
It was a little bit plain in terms of the visuals and functionality but I think that we did a really

84

00:06:51,390  -->  00:06:57,980
good job of highlighting the high points of redux router and specifically redux him as well.

85

00:06:58,020  -->  00:07:02,200
I hope you enjoy this and I hope you learn a lot out of this section.