Are now at a place where we have a solid foundation of what's going on with three ducks read x contains
our application state which is generated by a series of producers that we write that state is then modified
by Culin action creators action creators return actions which flow through middleware and then into
the reducers whenever a new set of state is produced.
It flows into our containers and those containers pre-rendered themselves and the entire process repeats
all over again.
So this is great for working with reaction redux.
But what we haven't really learned so far is how to build really interesting applications.
For example we've covered how to fetch data but we haven't really spoken about how to post data like
say when we are creating new entries of data on a remote server.
In addition the app so we've built so far.
I've always used a single screen.
There is no concept of like navigation within our apps.
Changing the oil or the page never updates the content of the app in any way shape or form.
So we're going to tackle these big gaps in our knowledge head first in this next section.
In particular there is a couple of different topics that we're going to study in great detail.
First we're going to talk about how to navigate a user around our app real javascript applications allow
users to navigate around to see different pages of content.
We need to figure out a way to add different pages to our application that the user can see.
Second and this is very closely related to the first item we need to figure out how to load data from
a back end API based on the users current route.
So say when a user navigates around an application to some different page we need to go and fetch the
relevant data before we can render that page.
Finally we need to figure out how to build useful forms that include at least a touch of validation.
We've used some you know small forms in the previous sections in the form of say you know search bars
but they didn't give any validation tied to them whatsoever.
And the data that we collected which was always used for a query like you know get requests were really
to figure out some way to take the data that the user enters validated and then post it to a remote
server and you actually save that record.
OK.
So let's talk about the app that we're going to built to explore some of these topics.
I'm going to pull a mock up on my screen here and we're going to go through it.
So this app is going to be a simple blogging application.
So it's going to have the usual create replace update destroy type routes but we're going to go through
it step by step and make sure that's crystal clear exactly how each step works.
So the app is give me you know a little bit vanilla in this section we're going to focus on styling
very much it's kind of plain but we're going to make sure that it's really clear exactly how to do these
very core actions on these very core parts of building a real application.
So let's look at the app.
The first screen is what we're going to refer to as our index to the index shows a list of all of our
different blog posts that this user currently has.
If they click on a blog post so let's say you know click on this area right in here.
We should navigate to what's called a show page and that's this page in the middle of the show page
shows a distinctly different view to the user.
You know we're not seeing a list of blog posts anymore.
We're showing just a single post right here in the middle.
Finally the user can create new posts by clicking the ADD post button on the index screen over here
which will take them to kind of compose form where they'll create a new record a new blog post.
The user can enter a title categories for the blog post and the actual contents for the blog post so
you know the bulk of the text.
That would consist of the actual blog post.
Once they click the save button it will save the record to a back and server and then it will navigate
them back to the index page.
They can also click the cancel button here just as easily and go back to the index page as well.
One thing they want to pull your attention to is this text at the top of the mark.
I've labeled what I call here as a route.
So the strength here being forward slash means if I navigated to say like you know Blog Post dot com.
Let's say that we were making a Web site called blog posts dot com going to just the address Blog Post
dot com would give us the route forward slash ads.
You know the root directory the very core of the app.
So when a user first navigates to our app and they are at this very core router right here they should
end up seen the list of blog posts the index view.
Similarly when they navigate to something like posts five where five is the idea of the blog post.
And so it might be you know post 5 post 1000 post 2400 or 15 or what have you.
They should see a blog post that corresponds with that particular ID.
So the idea here is that these parts of these the route that we're going to find have an actual impact
and meaning within the application.
Finally the last one post-New should just show a new form for the user to you know create the actual
blog post.
OK.
So overall the blog post or this outpouring here is going to behave much as you would really expect
an app this type of you know this type of application to behave.
Its you know again kind of playing out.
So we're really focusing on the functionality and making sure that we get these very core interactions
done correct as as correctly as possible.
OK so with this in mind we're definitely come back to the maake appears several times so I'm going to
keep it close at hand.
The one thing that I do want to do in this section that is very co-related is just to get our boilerplate
package installed.
So just as before in our previous packages or previous projects I'm not the redux simple starter link
right here.
Make sure that you're on redux simple starter and you can use whatever set of installation directions
you like right here.
Just make sure that you grab a new copy of the repo so that we can get started in the next section.
So I'm going to go ahead and clone it
and then I'm going to change into the directory and run NPM install.
Make sure you get your dependencies installed.
And while that happens I will touch you in the next section.