Unless video we fix up our posts reducer.
So now any time that we make a request over to that API we should be getting back in action with our
Paller properties showing up inside the reducer that reduce search should be returning the list of posts.
So our redux state object is now going to contain that list of blog posts from the API as soon as that
happens our entire read re-act application should be rendered.
It's not the last thing we do is open up that component of post list.
It is right here and we need to make sure that we get that list of posts inside this component.
Remember anytime we want to get some data from the redux side of our application into the Riak side
we're always going to define the map state to prop's function and pass it off to you connect.
Down here at the bottom.
So underneath my component I'm going to define map state to prop's.
This is going to be called with our entire state object out at the redux store.
If you open up your reducers index file you'll recall that we assigned our reducer to this post key
inside of our combined reducers call.
So that means that our state object right here is going to have a property called posts and that property
is going to hold all the data that are douceur has returned.
So inside a map state the props are going to return an object with posts and it's gonna have the value
of status posts
and then going to take map state to props and hand it off as the first argument to the connect function.
All right so now every single time that our reducers run map state to prop's is going to be called again.
We're going to return a new object with property posts and that object is going to show up as the prop's
object inside of our component.
So now just to test to make sure everything is working OK.
I'm going to add a console log to my render method and I'm going to cancel log out this prop's posts.
Now one thing I ought to mention very quickly before we test this we technically have one little air
inside of our code present that air that we have is not going to result in any error message.
I left this error this error in or little mistake and because I want you to see exactly what happens
when this error is in.
I really expect this is going to be an error that you're going to make.
Unfortunately when you start working on your own project so I just want you to see this air firsthand.
OK.
So we're going to save this and we'll flip back over to our application and we'll see that inside of
our council.
We have two council statements here now.
First off why do we have to cancel logs.
The reason we have two council locks is that when our application is first loaded up inside the browser.
All of our producers run one initial time so the instant our application loads up inside the browser
are reduced to right here runs it's going to run with an action of some initialization type it's going
to have some random type inside of that action object whatever type it is.
It's probably not going to match the case that we have right here of fetch posts.
So we're going to return our default state value of an empty array.
So when our application first boots up we're going to have a state object that has a post property and
that post property is going to contain this empty array.
After all of our producers run our application the Riak side of application is going to be rendered
one time on the screen.
So the post list component is going to be displayed on the screen one time during that initial one time.
We're going to have our render method called and that's going to invoke the console log right here.
And so we see a single console log with this Propst outposts that is this empty array that you see right
here.
So that is the initial first time our application is rendered onto the screen.
Now immediately after the postals component shows up on the screen our component did mount lifecycle
method will be called and then we go through that entire process of running off to that API and fetching
some data after we get some back some data and we dispatch a action to reduce her or reduce or sees
that the action has a type of post it returns whatever value is inside of that action at Paller property
redux sees that we have not returned the same object in memory.
We have not returned that same array.
The second time we do Saran Instead we return this brand new value.
This action not payload whatever it is because that is a totally new value redux assumes that it has
some new data inside of our application and redux essentially tells react to revenger itself.
With this new data and so our post last component is going to be rendered to the screen a second time
map states prop's is going to be called a second time.
We're not going to get the new value of states posts and then that new prop's property or prop's post
is going to show up inside of our component the render method gets called again and we see that console
log a second time appear.
OK so that's a long winded explanation of why we have to console.
And the first console log is an array.
Which is exactly what we want.
Because that is our default state value.
But then the second console log this is where that little air I mentioned comes into play.
So you'll notice that the console like here for this Propst up posts is the entire response object that
we got back from the API or through Acciona essentially.
And so this object has properties like config and headers and request we don't care about any of those
properties whatsoever.
The only thing that we care about in that response is the data right here.
That is the list of blog posts that we are trying to show on the screen.
And so the little air that we have inside of our code right now is essentially just the fact that we
are dispatching the entire response object from our action creator when in fact we should probably only
be dispatching this data array instead.
So essentially back inside of my actions file here's where we dispatch our action.
And on our Paillard property we have that entire response.
So we don't care about the entire response.
All you and I really care about and the only thing we really want to be picked up by our reducer is
the data property on there.
So I get to make sure I put response data like so so now that I've got response data that means that
when we get that second console log we should see the array of posts that are now showing up as props
inside the post list component.
So if we flip back over after saving we'll see the first console log of empty array and we'll see second
counts alog with our list of posts inside of it.
Perfect.
OK.
So now that we've got the list of posts list of posts here we can now take a quick pause and when we
come back we're going to add some more logic to our post list component and make sure that we render
out that list of posts as a list on the screen.
So quick break and I'll see you in just a minute.