-: Let's get started with our application.
I'm gonna pull the mock up
that we were just looking at back up on the screen.
So this is the application that we're going to build.
Remember, we've got a list of users
and a, someone who's using this app right here
should be able to see a profile for a single user
and click a button that will send an email
or at least open an email client to send an email
to that very particular user.
So it seems to me the only real resource
that we're gonna have in this application is going
to be our list of users.
Therefore, I think we'll end
up building a user's reducer to produce our list
of all the different users.
We'll also make an action creator that's going to load
up the data of all of our different users,
but we'll get to that in just a minute.
Let's first start with our users reducer.
So in our reducer directory, I'm gonna create a new file
and I'm just gonna call it users.
At the very top, we're going to need to import a type,
so let's also make our first action type.
I'm going to make a new file inside
of our actions directory called types.js.
Let's assume that our action creator is going
to return an action called FETCH USERS.
So we will export const FETCH USERS. FETCH USERS.
I'm gonna save this, close it,
and then back in our reducer file, we will
we will import our type FETCH USERS
from actions types. Okay.
Now, once we get this action come across
with type FETCH USERS, we're just going to assume
so you know, we're building this all from scratch.
We're just gonna assume that when an action comes
across with this FETCH USERS type
that the action will contain a payload that consists
of all the different users that we wanna show on the screen.
So an array of objects, that's what we're going to assume
that we're going to get served here.
So let's write our reducer.
We'll export default function.
The first argument is our state.
We're going to have a list of users,
so we'll default the state to an empty array.
Second argument is an action.
We'll do our switch over the action type, and in the case
that it is FETCH USERS we will return our existing list
of users along with the new list of users.
Remember the spread operator, you can really just think
of this line right here as take the existing state
and concatenate on the new list of users as well.
That's how the spread operator is really doing for us here.
So in the case
that we get an action that does not correspond
to the type FETCH USERS
we do need to handle the default case.
So at the bottom we will will by default, just return state.
All right, I'm gonna save this file.
And now we need to wire it up to our combined reducer call.
So I'll flip over to index.js.
Inside the reducer directory
we will import our users reducer from users
and then we will replace this existing kind
of dummy reducer in here with users, users reducer.
Okay, so there's our whole reducer.
We're probably not gonna need to change it at all
throughout this entire application,
but we might go back in there and I don't know, maybe pick
around a little bit and put some debug statements.
We'll see when we get there.
So all we did in this section was create our one
reducer that accepts a single action type of FETCH USERS.
And we're going to assume
that FETCH USERS is an action that's going to be passed
through that's gonna contain an array
of different users on action.payload.
So this is, we're already building
up some like really critical assumptions here.
So let's keep these in mind as we go forward.
Let's get started in the next section,
where we will make an action creator that's going
to create this FETCH USERS action.
I'll see you there.