Instructor: In the last section,
we wired up our Redux application
to the react side of our app.
So now we've got our Provider tag
inside of our root index.js file,
along with our instance of a Redux store.
We'll now continue by starting to put together
our saveComment action creator.
This action creator is going to be very straightforward.
It's going to take a string and dispatch an action
of some given type that includes that string.
So presumably, that string is gonna represent
the comment that we're trying to add to the application.
We'll need to also remember to flip over to our reducer
and add a case to that thing to watch for the action
that's created by this action creator.
But first, let's make the action creator.
To get started, I'll find my SRC directory,
and inside there, I'll make a new folder called actions.
Then inside that folder, I'm gonna make two files.
One will be index.js, that's gonna house our action creator,
and I'll make one more called types.js.
that's going to house the single type
that we're gonna have inside of our application.
So we'll take care of the type first.
We'll say, export const, and we'll call this action,
how about something like, SAVE_COMMENT,
I think that's reasonable.
And then the actual string behind it
will be just save_comment or whatever we want.
So we can now import this type right here,
into our actions index.js file.
So over inside of actions index.js, excuse me,
I will import SAVE_COMENT
from actions/types.
Don't forget the curly braces right here,
because we might have eventually,
multiple exports from types,
and so we did a named export right here,
which means we have to use those curly braces
to get just this property.
Then inside of our index.js file,
we can create our actual action creator.
So I will say, export function,
we'll call the action creator, saveComment.
We're going to assume that this function will be called
with a comment that we're trying to save.
So I will receive that as an argument called simply comment.
Then inside the function, we can return an action
with a type of SAVE_COMMENT,
and a payload of the comment that was provided
to the action creator, like so.
All right, not that bad.
That's pretty much it as far as our actions go.
Now let's really quickly flip back over
to our comments reducer,
and we'll make sure that we watch
for this additional type of SAVE_COMMENT.
And anytime we see it,
we'll add it to our active list of comments.
So inside the reducers, comments.js file,
I'll first add in import statement at the top of the file
to get the type that we just imported.
So I'll say, import
SAVE_COMMENT,
and again, do not not forget
to put the curly braces in here,
from actions/types.
Then we can add that case or that type
to our switch statement by adding in a new case.
So I'll say, case SAVE_COMMENT, and anytime we see an action
with this type right here, we'll take the actions payload
and add it to our state array.
So I will return a new array with dot, dot, dot state.
So that right there is gonna take
all of our existing comments and add it to this new array.
And then we will add on top of that
the new comment that just got passed into this reducer,
which will be action.payload, like so.
Okay, so that's pretty much it in entirety
on the Redux side of our application.
So now the last thing we have to do
is go over to our comment box component
and make sure that we wire up
that action creator that we just added.
So anytime someone submits a new comment
with this handleSubmit function right here,
we call our action creator and save the comment.
So quick break, and we'll take care of that
in the next section.