Instructor: In the last section, we wrapped up our tests
around the comment box component.
Now, rather than moving on to the comment list component
we're going to instead do a little bit of a pivot
and start setting up redux inside of our application.
We'll start wiring up redux.
We'll set up our reducer and our action creator
and then we'll come back to the comment list.
The reason that we're taking this detour
is that the comment list is really dependent upon
accessing our list of comments out of the redux state.
So I think that we really need to work
on that side of things
before we put together the comment list.
So with that in mind
we're gonna flip back over to our code editor
and start working on our redux side of things.
I'll first get started inside my SRC directory
by creating a new folder
that's going to house all of our reducers.
In this case, we just have one reducer
but we're gonna make it anyways.
So in the SRC directory
I'll make a new folder called reducers.
And then inside that folder
I'm gonna create two separate files.
One file is going to contain our comments reducer
so I'll call it simply comments dot js.
And then the other file that we're gonna create
still inside the same directory will be index dot js
and this is going to house our combined reducers call.
Remember, combined reducers takes multiple reducers
and combine some altogether into a single object.
Okay, so let's first get started
inside of our comments dot js file.
So the idea behind this first reducer,
oh, let's pull up a quick diagram here.
Where is it?
Here we go.
So for this single reducer that we're going to have
our intent is to return an array of strings.
Each string is going to represent a comment
that needs to be rendered out on the screen.
For right now,
we'll put together just kind of the skeleton of our reducer,
and we'll come back later to it once we have a better idea
of exactly how this action created down here
is going to work as well.
And we'll make some changes to the reducer.
So for right now, just a little bit of boiler plate.
So in my reducer comments dot js file
I will create an export a function.
So we'll say export default function.
This function is going to be called with a first argument
of our initial state,
which be of our state produced by the reducer,
and then a second argument of the action.
And inside of here, we'll put down our switch statement.
We're gonna look at the action type,
and eventually we'll come back
and add some different types to this reducer.
But for right now, we'll have just one single case
which is the default case.
So in this case, we're just going to return
whatever state we got passed.
Now the last thing we need to take care of here
is to make sure that we initialize our reducer
with some initial state, which we can easily do
by setting a default argument
for our first argument right here or default value.
So we'll default our state to be an empty array
because eventually we're going to want to return
an array of comments.
Okay, so that's it.
That's all we have to do inside this reducer for now.
We'll come back in just a little bit
and add an actual type to it.
We'll now flip over to our index dot js file
where we will import that reducer we just created
and add it to a combined reducers call.
So I'm going to import combined reducers from redux
and comments reducer from reducers comments.
On combined reducers right here,
remember that the Redux Library
exports many different functions.
So we are using the curly braces to specifically get access
to just the combined reducers function.
Then underneath those imports
we will combine all those reducers together
or in this case, just the one I suppose
and export it right away.
So I'll say export default, combine reducers.
We'll say that our state object
will have a single key of comments
and that's going to be where our list of comments exists.
So I'll say comments is, comments reducer.
All right, so that's it.
That's all we need to do right now for our reducer setup.
Now, in the next section,
we'll come back and start setting up redux
inside of our index dot js file
and make sure that the redux side of things
gets included over
to the react side of our application as well.
So quick break and I'll see you in just a minute.