Let's continue working on our post show component.
Now in the last section we did say that it seems like this component is going to be pretty easy to put
together.
And yeah that is true.
There's not going to be a lot of code here but there is one very important aspect or a concept that
is kind of underlying the creation component right here.
So let's figure out exactly what that is.
So it all comes down to how we load our data inside of our application really quick.
I want you to just imagine that a user comes to our application by navigating directly to the root route.
So the Post index component if the user visits the post index component first inside of our application
it'll call that action creator that we made much earlier to fetch our big list of posts.
So that action creator will go and fetch all of our different post from the back end API.
And we would eventually end up with a Post piece of application state that contains maybe post 1 2 and
3.
So all the different posts we have now I want you to imagine a different thing that might occur in Siver
application a different flow.
I want you to imagine that the user opens up their browser and manually navigates over to the posts
show a component by presumably going to local host ADHD slash post slash 5.
So maybe they are too legalistic with too.
So maybe they want to see in the post with an ID of two.
Now in an ideal world whenever a user wants to look at a very particular post we're not going to go
and fetch the big list of posts again.
We're only going to fetch the very specific post that a user wants to see.
So post 2.
So if a user goes directly to the post-show component we want to only fetch the data that is required.
But if a user lands on an application by going to the Post's index page we want to fetch everything
that's available.
It's really important to keep in mind that a user can enter into your application on pretty much absolutely
any page that they want by either bookmarking the page or maybe they open up a new tab or maybe they
share a link with a friend.
You always have to assume that a user might be entering to any given page inside of your application.
So what I'm really trying to say here is that the post-show show component really needs to be responsible
for fetching its own data.
We cannot assume that the user first went to the Post's index page and fetched the big lists of posts
and then navigated it over to post so we have to always assume that the user or we need to fetch fresh
data for the user whenever the user comes to this component so that in mind let's start off this new
component by putting together an action creator to go and fetch a very particular post so I can flip
back over to my code editor and I'm inside of my post show component right here.
So the goal is to first create an action creator that will fetch our given post.
Let's open up our actions index stock G-S file and then inside of here.
At the very bottom will define a new action creator called export function.
Fetch post and we're going to assume that this function this action creator is going to be called with
the ID of the post that we want to fetch.
So receive an ID or receive an argument of ID then inside of your.
We can form up an X CEOs get request to reach out to our API and fetch the very particular posts that
we're interested in.
At this point I do want to remind you how the API works.
If we make a request to API slash slash 5 we'll get back just that very particular blog post.
So this is the type of router right here that we want to end up with.
All right so we'll see.
Konst request is going to be Acciona don't get will use a template string here.
So do make sure that you're using tactics tactic's inside you are L..
Start off with the root you are l.
Then we'll say slash posts slash the ID of the post you want to fetch and then the API.
Whoops.
Curly braces API key like so.
And of course we want to make sure that we return an action from every one of our action creators so
we all return a type of fetch post with a payload of requests.
Let's not forget to create this typewrite.
So I'll scroll up to the top of the file
and we'll define export Konst That's post like so.
OK so we've now got an action creator which should be able to reach out and find a very particular post
from our back and server.
Let's now flip on over to our producer and make sure we add in a case to catch this new type and add
it to our application level state.
So I'm going to open up my reducer post file from the import statement at the top.
We'll also import Thach post and then we'll add on an additional case.
So case fetch post.
OK so this is going to be a little bit interesting.
Now we know that our application or our Post piece of state is an object.
So we know that we're going to be ultimately returning an object here.
Now we already have some number of posts possibly that have been fetched and stored inside this reducer.
Now I really don't want to throw away all the different data that I fetch over time.
Really I want to add to my existing application level state rather than tossing away all the previous
posts I've ever fetched.
So to make sure that we take all the posts that we've already fetched and include them in here we'll
say dot dot dot state like so.
So take all the existing posts we have take them all out of that state object and put them into this
new object that we are about to return.
And then on top of that we're going to add a new key value pair where the key will be the idea of the
post that we fetched and the value will be the actual post itself.
So remember that the posts that we fetch is available as action not payload dot data because we're using
Acciona here and the data that we care about is on the data property.
So let's start off easy.
We'll first say here's the post here's the post that we're getting post is action dot payload dot data.
Now we need to make sure that this object right here contains the ID of this post as a key.
So we're going to do things first.
A very simple long form way that you might do if you were writing S-5.
And then we're going to come back and refactor it to use a little bit of E6.
So want to make sure everything is clear to start and then we'll do the fancy stuff after.
So we'll say Konst new state this is going to be the straightforward way than new state postcard ID
is post.
So take that new state object and clear up the comma there take the new state object and add on this
additional property of the posts ID and set that equal to the posts and then return new state.
So if we only had 5 available this is the code that we would end up with with E6 we can do something
a little bit more clever.
So I'm going to clean all this up.
I mean if you want to you can comment this all out and refer back to it.
Actually I think I'll go ahead and comment it so we can refer back to it.
So all we really need to put down here is return an object that is going to get all the state that we
already had.
Now here's the new piece of syntax we're going to put on squared races square brackets I should say
inside of it will say action payload dot data dot ID a colon and then x not payload dot data.
OK so this code on this line right here hundred loops sorry.
Hundred percent identical.
Same exact thing as what we're doing in these four lines of code right here.
By placing the square braces we are not creating an array.
Remember we are not making array right here.
We are doing QI interpellation.
So we're saying whatever the variable action payload data ideas make a new key on this object using
this value right here and set its value equal to action.
Payload data.
So over time as a user starts to fetch more show routes inside of our application will fetch each of
these additional posts and we'll add them into the overall state object right here.
OK.
So in this section we put together our fenceposts action Creator and we also added a little bit of logic
to our reducer to meld that new post into our application level state.
Let's take a break and we'll continue in the next section and start working on making sure that the
posts show component will actually call that action creator.
So I'll see in just a second.