I'll write my friends in this video we're going to start working on our next application to get a better
idea of how redux works.
We're going to first by talking about the application we're going to build and some of the objectives
inside of it and really highlight what we're going to try to understand inside the redux world.
So let's get to it now.
First off a little bit of a disclaimer here.
I feel compelled to tell you this the application we're going to be building is going to be a little
bit plain and it's going to remind you of some of the very simple applications we worked on back when
we were talking about re-act earlier on inside this course but this application is going to be very
plain for a very good reason.
We are going to be talking about some pretty complex things and complex topics in the redux world.
I'll be completely honest with you.
I actually already recorded this video and the next like about 70 or so building a completely different
application.
So I already recorded like one version of this application and the apple is really complicated and I
can even show you proof.
You know here's all the videos when the initial version of this out that I put together and the app
that it showed was really complicated.
And at the end of the day even though the app was more interesting it ended up being really really challenging
to understand what is going on.
So the purpose of this app is to teach you more about redux and having a neat application is really
kind of like a side concern.
We're really not concerned with making a super awesome app just yet because we're still in this learning
mode of sorts.
Remember right now as far as difficulty curve around redux goes for still at this upper plateau right
here and we need to get over to this kind of big dip as soon as we possibly can.
So this is going to be the last like kind of boring application.
And then I promise you we're going to look at some really interesting apps.
OK.
So enough of that what are we going to build.
And what's our goals here.
So the big goals for this application we need to really understand the purpose of reducers.
We've already taken a look at a couple of reducers I gave you an analogy of how they work and we put
together some code for one or two.
But in this application I want you to get a crystal clear understanding of the purpose of reducers and
exactly how they work internally.
We're going to eventually take a look at some of the redux source code so that you can understand a
behind the scenes exactly what a producer is doing.
Next up we're going to get total understanding on how we make API requests with redux.
So we're going to reach to some outside API get some data and return it back into our redux application
and then somehow work with it in some fashion.
And then finally we're going to start to understand the purpose of middleware inside of redux specifically
a middleware called redux.
Thunk we haven't spoken about middleware at all just yet.
That's going to be a big new topic.
All right so that's our big goals.
So now with all that buildup Let me show you this application.
So yeah this is it.
Like I said pretty straightforward.
We're going to essentially be rendering a list of blog posts on the screen that we're going to fetch
from some outside API.
So we're going to have a series of elements here.
Each one is going to show the title of a blog post the body of the blog posts like actual content and
then underneath that we'll put some author's name and then on the left hand side over here is going
to be just a simple icon not a picture just a simple icon.
So yeah.
Like I said the application itself is very boring but our goals here are to really understand redux.
And once we get this really great understanding then we're going to focus on building the cool apps.
All right.
So thinking about this application I think that we only need two distinct components to really put this
together.
We're going to make a component called the post list which is going to render the entire list of blog
posts and then very interestingly this is going to be kind of a nonstandard thing that we do we're going
to render it the author's name right here like that single little div with some text inside of it from
a component that we're going to call the user Hetter.
Now the reason we're going to split that off into a separate component is going to be a lot more obvious
once we start to take a look at how we fetch data from an outside API and make use of it inside of application.
So for right now we'll just say yeah we're going to kind of have this interesting component set up.
But the reason that we're splitting out that single little head or two a separate component is going
to be obvious in just a little bit.
All right so now the next thing I want to show you very quickly is where we are going to fetch this
data from.
Remember we're going to get this list of blog post to show on the screen from some outside API.
So we're going to be putting together our application.
We're going to use axially to make a request over to a free public service called the Jaison placeholder
API.
JS some placeholder API is not terribly unlike that faker module that we worked with much earlier in
the course.
It essentially just has a bunch of fake data that we can freely request to and get access to and load
up into our application very commonly used any time that you just need some stand in source of information
to kind of demonstrate how making API requests work.
Let's very quickly take a look at some of the documentation around that API so we can go to Jason placeholder
type code dot com.
I'm going to take that link.
Open up a new tab and head on over to it.
All right.
So this is the J someplace holder API.
We can take a look a little bit down here and find a section called resources.
So these are six different end points so we can make requests to get back a ton of fake data.
But once that we are going to care about is the posts and point right here and the user's end point
right here.
So if I click on those in a new tab it'll open up a whole bunch of Jaison like you see right here.
Now notice on my screen this is all formatted nice and pretty.
It is because I have a Chrome extension that automatically formats Jason data on the screen.
So when I take a look at this list of posts right here you'll see that every post object has a title
has a body.
The post itself has an ID and then it also has a reference to the user who created the post as well.
So in this case user with ID one created this blog post this blog post this blog post and like basically
the first 10 or so on here and then eventually it flips on over to blog post created by user ID number
two.
So if we want to figure out who each of those users are we would have to make a second request over
to this users and point and click on users open it up in a new tab.
And now this will show me a list of different users that can be returned from this API.
So here's a user with ID 1.
So in that case its Leon Graham.
And again this is a fake person.
So Leon Graham is the person who created this blog post this one this one and so on.
And then as you might imagine we can go down here a little bit more and see who created blog post number
or see me the author with ID number two.
That is the person who created all of these blog posts down here the ones with user id of to to do and
so on.
So this source of data is going to be pretty straight forward.
The only complication here is that essentially theres two separate endpoints that we're going to have
to make requests to to get all the information that we need to show this list of blog posts on the screen.
We're going to first have to make a request to just get the list of blog posts on the left to make a
follow up request to get each individual author's name to show on there.
But we'll get the details on that on just a little bit.
Right now let's flip back over to our terminal and we're going to generate a new project and we'll start
working on it in the next video.
All right so you'll notice that I've already changed back to my workspace directory of sorts right here.
So inside this folder I'm going to create re-act app and we're going to call this application about
now up business.
Originally I'd kind of wanted this to be like a business thing application but instead it's really a
list of blog posts.
So let's just call it blog like so.
All right.
So that's going to fetch a couple of dependencies for us.
Let's take a pause right here.
When we come back the next section we're going to start working on our application.