Source applications we're going pretty darn well we can see a list of posts we can navigate to one we 2
can delete if we want. 3
We can navigate back around we can add a post we can cancel everything that you would expect out of 4
a normal blogging program like this. 5
It takes just a second to cover some of the hypo points about this application specifically some of 6
the more confusing ones. 7
First let's talk about re-act router and what it did for us. 8
Re-act router took over the process of figuring out what components needed to be rendered on the screen 9
at any given time. 10
It did this by taking a look at the current U R L and then referencing that with our routes that we 11
define inside and outside us we define a couple of different routes. 12
First off we always said always show the component that was our very core container the entire application 13
app had just one job. 14
It would show any children component. 15
So whenever we navigated navigated to some nested component like say post slash News-New or post slash 16
ID that component will be passed into app and then app would render that component in addition to itself 17
whenever a user navigated to just forward slash. 18
We use the index route helper to make sure that we showed the post index components the index route 19
is showed whenever we navigate to just forward slash right here. 20
Next we made sure that we made use of re-act router by displaying re-act router in place of our app 21
component where we had it previously inside of our index Stut JS file right here. 22
We define router and also passed in our route's configuration object in addition to the browser history 23
object browser history just says hey use the entire you are l whenever you're trying to figure out where 24
you are. 25
If we want it we can also use the hash history object which is very similar just slightly different 26
in that it uses everything to the left to the right. 27
Excuse me of a hash and you were able to figure out where it currently is. 28
Next we defined a handful of action creators we're in a lot of surprise. 29
There weren't a lot of surprises here. 30
A lot of them are just normal API requests. 31
Very similar to how we've made before. 32
The only difference was that this time around we also did a post request and a delete request in here 33
so that we could actually make changes to our remote data. 34
But overall this is a lot of stuff we'd already worked with before. 35
Next our producer again read our posts reducer was pretty darn similar to what we've seen before. 36
We just had two pieces of state a all which contain all of our POWs. 37
But keep in mind that if those posts are not contained the content property. 38
And then we also had a single individual post kind of the active post if you will. 39
We then made three different containers index new and show index responsible for showing data to the 40
user or a list of all of the blog posts. 41
The one interesting thing about index was that it loaded its data as soon as it knew that it was about 42
to be rendered to the DOM by placing the auction creator inside of component will mount. 43
So whenever we were about to render this to the Dom the component would automatically attempt to go 44
in and fetch its own data for itself. 45
Once this component was showing a list of blog posts we were able to navigate to an individual blog 46
post by using the link tag provided by re-act router link tag is used just like any other component 47
and it really produces just a normal anchor tag on the page. 48
There wasn't too much else going on inside of index start but. 49
This is a pretty straightforward component. 50
Next post-up show this one was probably the second most difficult component we did right after index 51
. 52
So again this was another component that fetched its own data and the one twist here was that it needed 53
a parameter out of the eye out of the U R L to figure out what individual post it wanted to fetch. 54
This component was also in charge of deleting posts and we made sure that after a user successfully 55
deleted that post we would navigate them back to the index route. 56
Finally PPOs knew this was definitely the most confusing component that we put together in this entire 57
section mostly because it used a lot of new different concepts. 58
First we included our link tag. 59
We had a redux form and thirdly we also had our contacts for navigating our user around the application 60
programmatically. 61
One of the most interesting aspects of this of this component was redux form. 62
I remember at the bottom we set up some configuration for this form specifically named the form and 63
then we told it which fields it was going to be in in charge of. 64
We also did find a validation function then for each of our different fields that we defined we created 65
input or a textarea. 66
In the case of the content and we made sure that we passed in the fields configuration object provided 67
by redux form that made sure that reducto form was a 100 percent in charge of handling all the all the 68
changes and events emitted from this input right here. 69
We also use redux form for handling validation. 70
Specifically we made sure that we showed in the air if it existed for each individual input only after 71
the user had interacted with the input in some fashion. 72
Finally we made sure that we highlighted the entire form and the error message or seeing the entire 73
field and its error message read. 74
If the user had touched it and if the particular field was not valid if they had passed validation. 75
So this is definitely a pretty confusing little component right here. 76
But the good news is that everything that we did in here is almost 100 percent reproducible. 77
Whenever you create your own form you're always going to end up having very similar structure. 78
You'll define the name of your form the fields you'll divine define your validation function and then 79
you just need to make sure that you connect redux form with the individual form inputs. 80
Not too bad. 81
OK. 82
So I think this has been a fantastic little application. 83
It was a little bit plain in terms of the visuals and functionality but I think that we did a really 84
good job of highlighting the high points of redux router and specifically redux him as well. 85
I hope you enjoy this and I hope you learn a lot out of this section.