In the last video we finished doing a little bit of initial setup on our application.
So now we're going to do a little bit of a pivot here and we're going to start to focus on how we load
up data into our app a series of steps that I'm about to show you are going to be repeated many times.
Just about every single time that you ever once you load up some data into a redux application from
some outside API almost always it's going to be the exact same flow.
So the first time that we go over this flow I'm going to show you a really big flow diagram right here
to tell you exactly what's going to happen step by step.
But then as we go through this process in the future we'll kind of have a good understanding of what's
going on and we won't have to talk quite so much about how we load up data.
OK.
So let's get to it.
We're going to go through this thing step by step.
So the first thing that happens is we are going to render some component onto the screen such as our
post list component right here or post that component needs to get a list of posts from that Jay sun
API in order to show itself correctly.
So because of that we are going to define a component.
Did mt life cycle method on our component class.
That is why we created a class based component.
We wanted to make sure that we had access to lifecycle methods inside of the component did MT lifecycle
method were going to place an action creator.
So anytime that our post list component initially shows up on the screen that action creator is going
to be automatically called the action creator that you and I are going to put together is going to have
some code inside of it that is going to use X-post to make an API request over to the Jaison API.
After we make that request the API API is going to eventually respond with some amount of data.
In this case its going to be the list of blog posts that we looked at just a moment ago.
Right.
Here's our list of blog post right here.
Everyone has a title and a body property.
Once we get back that data our action creator is then going to do what an action creator is always supposed
to do it's going to return in action and the action object is going to have our fetched data on the
payload property.
So we're going to return our action from an action creator the dispatch method is going to dispatch
that action and send it off to all the different reducers inside of our app.
So then we're going to have some very specially configured reducer that is going to be watching for
an action of that type whatever we give this particular action the type of maybe you'll be something
like we just Fessor posts or you know some descriptive action type like that.
So some reducers going to see the action and it's going to pull off just the data from that payload
property.
Remember any time that our reducers run they're going to return some values.
Those values are going to form up a new state object inside of a redux store and some are reducers run
and produce a new state object.
We're going to take that state and it's going to be sent off to the Riak side of our application.
And so redux and re-act redux essentially are going to cause the re-act side of our apt to be rendered.
But now this time round inside of our state object we're going to have that list of posts.
And so we're going to make sure that we use something like the map state to prop's function that we
had looked at previously to get the list appose out at the global state object and into our post list
component.
OK.
So that's the entire flow with me talking very quickly about each little step inside there.
Now we're going to see this entire flow in action as we start to code it up and you're going to see
the exact same flow occur again and again any time that you are doing some type of API request inside
of a rebox application.
Now before we move on I want to point out a couple of interesting notes around each of these little
steps inside of your.
All right.
So for these first couple of steps remember we had said that we are going to put in action creator into
a component's component.
Did mt life cycle method.
This is an extremely common practice in general.
We're going to make sure that components themselves are responsible for fetching data that they need
to get by calling some action creator usually from a lifecycle method like component did mount.
There are some other places in which we will call an action creator to fetch some data but that involves
some other libraries that we have not yet made use of.
By far the most common place you're going to be initiating a data fetch requests from will be the component
did mt life cycle method now.
Down here we had a couple of steps around our action creator making requests out to that API.
So in general we're going to usually make sure that action creators are responsible for making our API
requests.
Now in some cases we might put together some external class or some type of external service or something
like that that is going to do the actual API request for us.
But in general it's going to be up to the actual creator to initiate the data fetching process.
Now you'll recall that a couple of videos ago we installed a dependency called redux thunk redux thunk
is going to come into play during this step right here.
Essentially when we call an action creator we haven't yet discussed what redux thunk is.
I just wanted you to know where we're going to eventually see exactly what redux thunk is and why we're
using it inside this project.
Nonetheless the one you mention is that whenever we fetch some data and we want to get it into a component
we're always going to make use of that map state to prop's function to get some data out of our store
and get it down into our component.
So the exact same process that we saw previously in the last application when we wanted to get the currently
selected song into a particular component we're always going to use that same approach for getting data
out of our redux store and into a rock component.
We will always make use of that connect function and the map state to prop's function as well.
Okay so now that we've got a better idea of what's going on here let's take a quick pause.
When we come back in the next section we're going to make sure that we wire up that connect function
from re-act redux to our Posterous component and then make sure that we have an action creator that
we can call to go out to that API and eventually get our data in return.
So quick pause right here and we'll continue in the next section.