Unless section we put together our entire action creator to fetch a list of posts from our API.
Now keep in mind that this one time we very likely don't have any post stored on the API.
So if we made this request right now I would probably expect to see an empty array come back.
So just keep that in mind for when we first go to test this thing out inside the browser.
Once we start to add in the functionality to add a new post to our API well then things are going to
be a little bit more lively inside of our application.
So let's now continue on the redux side of things.
By working on our reducer which is going to store or I should say produce the post piece of state.
Now again I wanted to remind you one last time.
Our goal here inside this reducers is to return a object that contains the ID of every post as the key
and then the value will be the actual post itself.
Now this is going to be a little bit awkward because as we spoke about just a little bit ago the API
that we're working with returns a list of posts in an array.
So we're clearly going to have to do a little bit of a transformation step in here but I assure you
it's not going to be the worst thing in the world.
OK.
So let's get started on our inducer.
I'm going to start off by opening up the index dot J.S. file inside of the reducers directory.
So inside of here we've got a dummy piece of state I should say a dummy reducer right now so we can
remove this whole line that's in here.
Just take the entire thing out.
Next we'll import the REDUCE-IT that we're about to create.
So we haven't made it yet but we're just going to assume that we're going to have it all put together
in just a second.
So import posts reducer from reducer posts and then we'll assign that to the Post's piece of state inside
of the combine reducers call.
OK so it looks pretty good.
Now we can create the redos or post file and start putting that thing together.
So inside the reducers directory will make the reducer posts that js file
will immediately start off by importing our type of fetch posts from the actions file.
So let's import fetch posts from up one directory into actions and then we don't really need to specify
any file in there because we're importing from the index on G-S file.
Next we'll put together some boilerplate inside of our reducer itself and export it immediately.
So will say export default function this function is going to receive the previous state an action and
then we have to essentially do something with it inside of here.
So put in our switch statement to switch over the action type will immediately catch the default case
in which case will return the state object will also add in our case for handling the incoming list
of posts as well.
And then the last thing I want to take care of before we talk about what we're going to do inside this
case is I want to think about our initial state object or what we're going to default our state object
to the very first time this thing runs.
And so we're saying that we're going to store our list of posts inside of an object.
So I'm going to say OK we will default our state to be an object no problem.
OK.
So at this point in time if we were to cancel log action dot response or some action not payload data.
I would expect this to be an array of posts so light post one post too but we need to somehow coerce
this thing or transform it into an object where the ID is the post ID and then the value is the actual
post itself.
So you might be thinking that will use like a for loop here or do some fancy transformation or something
like that.
Well in practice were actually just going to use the load ash module instead load ash library load library
has a method on it that assumes that you want to do basically exactly this operation right here.
Essentially take a array of records take one property out of each record and create an object out of
that.
So to give you a really good idea of how this load function is going to work and how it's going to just
exactly solve this problem for us I want to test out the code for it.
First it was kind of demo it inside the browser just to make sure thats really clear exactly what its
doing.
So going to flip on over to the browser and we're going to make use of a little tool that's going to
help us understand exactly what's happening with this code.
So let's open up a new tab and we're going to manually navigate to my name to Steven Grider dot get
hub dot IO slash J us playgrounds and do make sure that you get capital J S P playgrounds in there.
Also do make sure that you're going to get hub IO and then I really have to say it as well do double
check the spelling on my name.
It's very easy I found for people to misspell my name for whatever reason.
OK.
So once we come here we're going to get a little interface that's going to allow us to kind of do some
quick prototyping of code.
So essentially what it does is you can enter in some code on the left hand side over here and it will
immediately print the results on the right hand side.
And so it's kind of like a REPL.
But the benefit to this thing right here is that it prints out every single line of code that you add.
So for example if we say number equals five.
Sorry.
Let's let's just stick with the S-5 right now will say var number equals five.
And we ask what number is zero it prints out 5.
But if we then put out number plus one.
Well the first log right here is for this line.
And then the second log right here is for the second line right here.
And so we can also say your number is number like so.
And then I could go back and say change this number and everything automatically updates.
So essentially it's just kind of like a fancy REPL that we can use to explore some different snippets
of code.
OK.
So anyways back on track what we're attempting to do here is take that array of PPOs and massage it
into an object.
So I'm going to put down the list of posts as I expected to come in from the API.
So every post has an ID and let's say that every post just has a title.
So we'll say that first post has an idea for a title high.
Second one has a idea of 25 and a title of by and let's just do one more on here for completion sake
and we'll give this one thirty six.
How's it going.
OK so now if I look at my list of posts there it is right there.
I've got an array.
And inside that array is post number one post number two and post number three.
So again the job or the goal that we have here is to turn this array of objects into an object itself.
So a very simple very straightforward thing that we're going to use from loadout right here.
We're going to say underscore which is the loadout library dot map keys so map keys right here is the
little piece of magic that's going to make our life very straightforward very easy to make sure that
you have a capital K in there for keys.
So the way that map keys works is we provided a first argument of an array.
So there's my list of posts right there.
Then the second argument is going to be the property that we want to pull off of each object in here
to use as the key on the resulting object.
So if those words don't make sense no problem.
Essentially we know that we want to use the ID as the key for every object inside of here.
So we're going to pass in a string of ID.
I'm going to delete the intermediate console log right here post because it's just kind of confusing.
So you can see what map keys produces.
It made an object where the key is the idea of the post and then the object itself is the whole entire
post.
Still with the idea inside of it.
So we've got a key for that post points at the post with the idea for We've got a key of 25 points that
the post of 25 and a key of 36 which points at the post with ID 36.
So now to go full circle I will say that you know maybe this is our state object right here to go full
circle if I want to very quickly and very easily look up a particular post as we're going to very shortly
want to do.
I could look at say States at 4 and there is my post with ID 4.
And so I didn't have to write a fancy for loop I didn't have to use the array find helper anything like
that to find some particular record in here.
I just have to do a very simple Id look up.
OK.
So that's essentially what we're going to use for managing our states inside of this reducer.
And really just all comes down to that map keys function that's a little piece of magic that makes our
life very easy and very straightforward.
So let's flip back toward douceur and add that code in back over here and do a little bit of cleanup
on the code that we had inside that key statement.
I'm going to make sure I import load ASH at the top.
So import underscore from load ASH.
I'm going to make sure I've already got load installed as an end module.
Yup we've already got it so we're good to go.
So all we got to do in here is we're going to say return map keys take action payload data and I want
to pull off the id property of every incoming post.
OK.
So that's pretty much it.
To fetch our initial list of posts.
So this is looking pretty good so far.
Let's continue with some more implementation on the redux side of things.
Inside the next section.