In the last video we were able to call our fecche user action creator from our compound did mount inside
the user Hetter class.
Now in this video we're going to start to make sure that we wire up a reducer to catch that action that
is now being dispatched from our actual creator.
And we're going to make sure that this new users reduce is going to maintain a array or a simple list
of all the users that we have fetched inside of our application.
Once we collect that data inside the reducer we can then make it available to our user Hetter component
and then the user head or component can pick out that user that it cares about and shows some details
about it on the screen.
So let's get to it.
We're going to first create a new reducer by creating a file inside the reducers directory.
So I'm going to call this user's reducer.
Yes.
And then inside of your we'll put down some typical boilerplate for a producer they'll say export default
a function.
This is going to be called with arguments States and action because this producer is supposed to maintain
an array or list of records.
I'm going to make its default state value a empty array like so then inside of my producer to set up
a switch statement.
And we're going to set up one case here to watch for just the action type that this producer cares about.
If we open up the actions index file or Simien actions index yes file again you'll recall that we only
care about actions of type fetch user inside of that reducer.
So back inside of this case statement I'll say case fetch underscore user like so now if we see a reducer
or see me in action with that type right there we're going to make sure that we add the payload property
on that action to our state array.
Now we just spoke about how we can add elements to NRA member we looked at this diagram right here.
So to add an element to an array we can create a new array.
We can say dot dot dot state a comma and then the new record that we want to shove in there.
So for a case for each user I will say return dot dot dot state an action payload that is the new record
that I want to add in and we'll also set up our default case in which case we will simply return our
state OK.
That looks pretty good.
So we'll now take the seducer and make sure that we wire it up to our combined reducers call in the
reducers index such as file.
So at the top I will import users reducer from users re douceur and then we'll make sure that we add
this into the combined reducer call.
So add in a new key of users and that will get our reducer of users Regis or.
OK so not too bad.
So now last thing we really have to do here is open up our user header J.S. file.
So now inside if you're this component needs to get access to our redux level state remember any time
we want to do that we will find the Mount St. to prop's function.
So down underneath the components self I will define map state to prop's.
This will be called with the state argument.
And now we need to look at state DOT users and to find the very particular users that we care about
to get started.
Let's just return an object with the users property and will reference state DOT users.
So now our component is going to have access to a prop called this Propst users that's going to be the
array of all the users that we care about.
All right so now inside the render method we're going to look through that array and find the user that
we want to display.
So to do so I'm going to say Konst user and then we're going to use this Propst users.
That's the array of users dot find like so not just you know find is a built in method on Javascript
arrays we can call it with a function.
This function is going to be invoked with every element inside of that array.
And so I will we will refer to that argument as simply user and then as soon as we return true from
this inner function right here the entire find function is going to stop and return whatever element
we had return true for now.
When I actually say those words out head sounds a little bit confusing.
So let me just give you a very quick example.
I'll pull open my console again.
We'll just do a real quick test here so I can say Konst colors and I'll do my array of colors again
and I'll add in like say a blue and red like so I think I've got a typo there.
Let me fix that.
OK so now to get say blue out of there we can do colors find and then for each color I want to return
the results of color being compared with the string blue.
So now which ever first element inside of our array returns true for this comparison right here.
We're going to return that color from the overall expression.
And so we're going to do the same thing to find that user that we care about.
So I'm going to say find for every user find a user with an ID equal to this Propst user ID and I'm
going to try to put that on one line.
Actually I'll just zoom out so you can see the entire line like so.
So this will find just the user that we care about.
Now keep in mind when the application first is rendered onto the screen we will not have a list of users
here.
We will have an empty array but the user that we care about is not going to actually be available.
So right underneath this will say if there is no user found.
So if we did not find some appropriate user then we will just return nothing for right now.
So just don't return anything.
I don't want this component to show any content on the screen.
I don't even really think it's appropriate to put loading although we certainly could we can return
it.
That said loading.
Like so.
But also keep it simple and all return NULL to indicate that I don't want this component to show anything.
Now if we did find a user We will instead put the user's name inside of here.
So the user's name is accessible on the name property so say user name like so.
All right.
And then very quickly I want to throw in one or two quick class names here.
So on that div I'll put in a class name of simply Hetter like so.
All right so I think this should be just about good enough.
So let's take a save on this file and we'll flip back or the browser and we'll test this out really
quick.
All right.
Now I got a nasty error message here so it cannot read properly.
Find of undefined.
Let's make sure I got that in all places up.
So looks like I probably have a little typo somewhere.
Let's see I've got users.
I'm not going to make you.
Oh that's right.
Little mistake right.
We defined map state to prop so we did not pass it off as the first argument to connect second to make
sure that I do so really quickly.
There we go.
And now if I flip back over and refresh.
Right.
That's better.
Now it's still loading just give it a second here.
There we go that's perfect.
OK.
So I can now see that on every blog post I've listed out the authors name.
So I see Leon Graham for the first 10 and then I see the second name of Irvin Howell and then Clementine
Bach and so on all the way down to the bottom.
So it definitely looks like this has worked out pretty well.
But there's one little issue you remember I mentioned there is one little issue now before I tell you
what that issue is.
There's a little refactor that I want to show you for the user Hetter component.
So take a quick pause.
We're going to do that quick refactor and then I'll show you the kind of a real big issue that our application
currently has.
So quick pause and I'll see you in just a minute.