1
00:00:00,800 --> 00:00:06,210
Are now at a place where we have a solid foundation of what's going on with three ducks read x contains

2
00:00:06,210 --> 00:00:12,840
our application state which is generated by a series of producers that we write that state is then modified

3
00:00:12,840 --> 00:00:19,050
by Culin action creators action creators return actions which flow through middleware and then into

4
00:00:19,050 --> 00:00:23,130
the reducers whenever a new set of state is produced.

5
00:00:23,190 --> 00:00:29,250
It flows into our containers and those containers pre-rendered themselves and the entire process repeats

6
00:00:29,250 --> 00:00:30,410
all over again.

7
00:00:30,870 --> 00:00:33,920
So this is great for working with reaction redux.

8
00:00:33,930 --> 00:00:39,270
But what we haven't really learned so far is how to build really interesting applications.

9
00:00:39,360 --> 00:00:45,580
For example we've covered how to fetch data but we haven't really spoken about how to post data like

10
00:00:45,610 --> 00:00:50,460
say when we are creating new entries of data on a remote server.

11
00:00:50,460 --> 00:00:52,880
In addition the app so we've built so far.

12
00:00:52,890 --> 00:00:55,200
I've always used a single screen.

13
00:00:55,200 --> 00:00:59,590
There is no concept of like navigation within our apps.

14
00:00:59,670 --> 00:01:05,530
Changing the oil or the page never updates the content of the app in any way shape or form.

15
00:01:05,850 --> 00:01:10,910
So we're going to tackle these big gaps in our knowledge head first in this next section.

16
00:01:11,130 --> 00:01:15,870
In particular there is a couple of different topics that we're going to study in great detail.

17
00:01:15,870 --> 00:01:22,170
First we're going to talk about how to navigate a user around our app real javascript applications allow

18
00:01:22,170 --> 00:01:26,550
users to navigate around to see different pages of content.

19
00:01:26,880 --> 00:01:33,090
We need to figure out a way to add different pages to our application that the user can see.

20
00:01:33,090 --> 00:01:39,000
Second and this is very closely related to the first item we need to figure out how to load data from

21
00:01:39,000 --> 00:01:43,550
a back end API based on the users current route.

22
00:01:43,830 --> 00:01:48,960
So say when a user navigates around an application to some different page we need to go and fetch the

23
00:01:48,960 --> 00:01:52,290
relevant data before we can render that page.

24
00:01:52,290 --> 00:01:58,660
Finally we need to figure out how to build useful forms that include at least a touch of validation.

25
00:01:58,710 --> 00:02:03,270
We've used some you know small forms in the previous sections in the form of say you know search bars

26
00:02:03,660 --> 00:02:06,450
but they didn't give any validation tied to them whatsoever.

27
00:02:06,630 --> 00:02:12,210
And the data that we collected which was always used for a query like you know get requests were really

28
00:02:12,240 --> 00:02:18,150
to figure out some way to take the data that the user enters validated and then post it to a remote

29
00:02:18,150 --> 00:02:21,070
server and you actually save that record.

30
00:02:21,620 --> 00:02:22,060
OK.

31
00:02:22,080 --> 00:02:27,870
So let's talk about the app that we're going to built to explore some of these topics.

32
00:02:27,870 --> 00:02:32,360
I'm going to pull a mock up on my screen here and we're going to go through it.

33
00:02:32,640 --> 00:02:36,200
So this app is going to be a simple blogging application.

34
00:02:36,330 --> 00:02:42,900
So it's going to have the usual create replace update destroy type routes but we're going to go through

35
00:02:42,900 --> 00:02:48,050
it step by step and make sure that's crystal clear exactly how each step works.

36
00:02:48,060 --> 00:02:51,930
So the app is give me you know a little bit vanilla in this section we're going to focus on styling

37
00:02:51,930 --> 00:02:56,670
very much it's kind of plain but we're going to make sure that it's really clear exactly how to do these

38
00:02:56,670 --> 00:03:02,790
very core actions on these very core parts of building a real application.

39
00:03:02,790 --> 00:03:04,560
So let's look at the app.

40
00:03:04,800 --> 00:03:11,430
The first screen is what we're going to refer to as our index to the index shows a list of all of our

41
00:03:11,430 --> 00:03:15,410
different blog posts that this user currently has.

42
00:03:15,840 --> 00:03:21,100
If they click on a blog post so let's say you know click on this area right in here.

43
00:03:21,780 --> 00:03:28,890
We should navigate to what's called a show page and that's this page in the middle of the show page

44
00:03:28,890 --> 00:03:32,460
shows a distinctly different view to the user.

45
00:03:32,470 --> 00:03:34,410
You know we're not seeing a list of blog posts anymore.

46
00:03:34,410 --> 00:03:39,630
We're showing just a single post right here in the middle.

47
00:03:39,860 --> 00:03:47,450
Finally the user can create new posts by clicking the ADD post button on the index screen over here

48
00:03:48,980 --> 00:03:55,640
which will take them to kind of compose form where they'll create a new record a new blog post.

49
00:03:55,820 --> 00:04:02,600
The user can enter a title categories for the blog post and the actual contents for the blog post so

50
00:04:02,600 --> 00:04:04,630
you know the bulk of the text.

51
00:04:04,670 --> 00:04:07,400
That would consist of the actual blog post.

52
00:04:07,760 --> 00:04:13,070
Once they click the save button it will save the record to a back and server and then it will navigate

53
00:04:13,070 --> 00:04:16,500
them back to the index page.

54
00:04:16,520 --> 00:04:22,200
They can also click the cancel button here just as easily and go back to the index page as well.

55
00:04:24,490 --> 00:04:28,810
One thing they want to pull your attention to is this text at the top of the mark.

56
00:04:28,930 --> 00:04:31,590
I've labeled what I call here as a route.

57
00:04:31,630 --> 00:04:37,660
So the strength here being forward slash means if I navigated to say like you know Blog Post dot com.

58
00:04:37,690 --> 00:04:43,210
Let's say that we were making a Web site called blog posts dot com going to just the address Blog Post

59
00:04:43,210 --> 00:04:46,760
dot com would give us the route forward slash ads.

60
00:04:46,780 --> 00:04:50,770
You know the root directory the very core of the app.

61
00:04:50,770 --> 00:04:56,020
So when a user first navigates to our app and they are at this very core router right here they should

62
00:04:56,020 --> 00:05:00,050
end up seen the list of blog posts the index view.

63
00:05:00,910 --> 00:05:08,010
Similarly when they navigate to something like posts five where five is the idea of the blog post.

64
00:05:08,140 --> 00:05:14,970
And so it might be you know post 5 post 1000 post 2400 or 15 or what have you.

65
00:05:15,010 --> 00:05:19,790
They should see a blog post that corresponds with that particular ID.

66
00:05:20,110 --> 00:05:25,780
So the idea here is that these parts of these the route that we're going to find have an actual impact

67
00:05:25,840 --> 00:05:29,130
and meaning within the application.

68
00:05:29,140 --> 00:05:36,280
Finally the last one post-New should just show a new form for the user to you know create the actual

69
00:05:36,280 --> 00:05:37,710
blog post.

70
00:05:38,470 --> 00:05:38,740
OK.

71
00:05:38,740 --> 00:05:43,570
So overall the blog post or this outpouring here is going to behave much as you would really expect

72
00:05:43,780 --> 00:05:47,800
an app this type of you know this type of application to behave.

73
00:05:47,950 --> 00:05:49,870
Its you know again kind of playing out.

74
00:05:49,900 --> 00:05:54,640
So we're really focusing on the functionality and making sure that we get these very core interactions

75
00:05:55,300 --> 00:05:58,470
done correct as as correctly as possible.

76
00:05:59,050 --> 00:06:04,330
OK so with this in mind we're definitely come back to the maake appears several times so I'm going to

77
00:06:04,330 --> 00:06:06,410
keep it close at hand.

78
00:06:06,430 --> 00:06:12,250
The one thing that I do want to do in this section that is very co-related is just to get our boilerplate

79
00:06:12,250 --> 00:06:13,840
package installed.

80
00:06:13,990 --> 00:06:21,160
So just as before in our previous packages or previous projects I'm not the redux simple starter link

81
00:06:21,160 --> 00:06:21,530
right here.

82
00:06:21,520 --> 00:06:26,800
Make sure that you're on redux simple starter and you can use whatever set of installation directions

83
00:06:26,800 --> 00:06:27,990
you like right here.

84
00:06:28,000 --> 00:06:33,870
Just make sure that you grab a new copy of the repo so that we can get started in the next section.

85
00:06:33,910 --> 00:06:35,380
So I'm going to go ahead and clone it

86
00:06:38,500 --> 00:06:42,850
and then I'm going to change into the directory and run NPM install.

87
00:06:42,850 --> 00:06:45,540
Make sure you get your dependencies installed.

88
00:06:45,640 --> 00:06:49,220
And while that happens I will touch you in the next section.