Are now at a place where you have a solid foundation of what's going on with three talks read x contains 2
or application state which is generated by a series of producers that we write that state is then modified 3
by Culin action creators action creators return actions which flow through middleware and then into 4
the reducers whenever a new set of state is produced. 5
It flows into our containers and those containers pre-rendered themselves and the entire process repeats 6
all over again. 7
So this is great for working with reaction redux. 8
But what we haven't really learned so far is how to build really interesting applications. 9
For example we've covered how to fetch data but we haven't really spoken about how to post data like 10
you say when we are creating new entries of data on remote server. 11
In addition the app so we've built so far. 12
I've always used a single screen. 13
There is no concept of like navigation within our apps. 14
Changing the URL of the page never updates the content of the app in any way shape or form. 15
So we're going to tackle these big gaps in our knowledge head first in this next section. 16
In particular there is a couple of different topics that we're going to study in great detail. 17
First we're going to talk about how to navigate a user around our app real javascript applications allow 18
users to you know navigate around to see different pages of content. 19
We need to figure out a way to add different pages to our application that the user can see. 20
Second and this is very closely related to the first item we need to figure out how to load data from 21
a back end API based on the users current route. 22
So say when the user navigates around an application to some different page we need to go and fetch 23
the relevant data before we can render that page. 24
Finally we need to figure out how to build a useful forms that include at least a touch of validation 25
. 26
We view some you know small forms and the previous sections in the form of say you know search bars 27
but they didn't really have any validation tied to them whatsoever. 28
And the data that we collected would was was always used for a query like you know get requests we really 29
need to figure out some way to take the data that the user enters validate it and then post it to a 30
remote server and you actually save that record. 31
OK. 32
So let's talk about the app that we're going to built to explore some of these topics. 33
I'm going to pull a mock up on my screen here and we're going to go through it. 34
So this app is going to be a simple blogging application. 35
So it's going to have the usual create replays update destroy type routes but we're going to go through 36
it step by step and make sure that's crystal clear exactly how each step works. 37
So the app is give me you know a little bit vanilla in this section we're not going to focus on styling 38
very much it's going to kind of plane but we're going to make sure that it's really clear exactly how 39
to do these very core actions on these very core parts of building a real application. 40
So let's look at the app. 41
The first screen is what we're going to refer to as our index view. 42
The index shows a list of all of our different blog posts that this user currently has. 43
If they click on a blog post so let's say you know click on this area right in here we should navigate 44
to what's called a show page and that's this page in the middle of the show page shows a distinctly 45
different view to the user. 46
You know we're not showing a list of blog posts anymore we're showing just a single post right here 47
in the middle. 48
Finally the user can create new posts by clicking the ADD post button on the index screen over here 49
which will take them to a kind of compose form where they'll create a new record a new blog post. 50
The user can enter a title categories for the blog post and the actual content for the blog posts so 51
you know the bulk of the text. 52
That would consist of the actual blog post. 53
Once they click the save button it will save the record to a back and server and then it will navigate 54
them back to the index page. 55
They can also click the cancel button here just as easily and go back to the index page as well. 56
One thing they want to pull your attention to is the text at the top of each mark. 57
I've labeled what I call here as a route. 58
So this right here being forward slash means if I navigated to say like you know Blog Post dot com. 59
Let's say that we were making a Web site called blog posts. 60
I'm going to just the address Blog Post dot com would give us the route forward slash you know the root 61
directory. 62
The very core of the app. 63
So when a user first navigates to our app and they are at this very core route right here they should 64
end up seen the list of blog posts the index view. 65
Similarly when they navigate to something like posts 5 where 5 is the of the blog post and so we might 66
be you know post 5 post 1000 post. 67
2400 15 or what have you. 68
They should see a blog post that corresponds with that particular ID. 69
So the idea here is that these parts of these the route that we're going to find have an actual impact 70
and meaning within the application. 71
Finally the last one post-New should just show a new form for the user to you know create the actual 72
blog post. 73
Ok so overall the blog posts are this opera here is going to behave much as you would really expect 74
an app in this type of you know this type of application to behave. 75
It's again not a kind of playing out. 76
So we're really focusing on the functionality and making sure that we get these very core interactions 77
done correctly as as correctly as possible. 78
OK so with this in mind we're definitely come back to the mockup here several times so I'm going to 79
keep it close at hand. 80
The one thing that I do want to do in this section that is very code related is just to get our boilerplate 81
package installed. 82
So just as before in our previous packages or previous projects I'm at the redux simple starter link 83
right here and make sure that you're on redux simple starter and you can use whatever set of installation 84
directions you like right here. 85
Just make sure that you grab a new copy of the repo so that we can get started in the next section so 86
I'm going to go ahead and clone it 87
and then I'm going to change into the directory and run an NPM install. 88
Make sure that your dependencies installed and while that happens I will catch you in the next section 89
.