So, that's it.
So, this is as you can see an arrow function,
which has four parameters and then will return whatever we create here.
So, you can see, it is going to return a JavaScript object.
So, plain JS object which has worked,
the action has to be.
So, inside this JavaScript object,
the first thing that we will define is the type, as you would expect.
So, every action object should contain a type.
So, how do we define the type?
This is where we will use the action types and then add comment here.
So, now you see the reason for defining the action types in
a separate file and then importing it in here
and then you can easily define the type to Redux.
All the types of actions are all
captured in the action types there and then you can import it in there.
So, and these action types can be imported into
the reducer functions files and then make use of there also. That's one part.
Now, I will follow a standard pattern and then define the second part as the payload.
The payload contains whatever needs to be
carried in so the data that is sent back by the addComment.
This is just my way of defining it,
and if it is a very natural way of specifying whatever data
needs to be carried in the action object to the reducer function here.
So, what does the payload going to contain?
It contain the dish ID,
which is the dish ID that I receive as the parameter,
it will contain the rating,
it will contain the author,
and then the comment.
So, this four parameters that this function receives,
and will them map them into four properties inside my payload object here.
And that's it. So, now our action object is
ready to be returned by this action creator here.
So, it has the type and then the payload here.
And this is a standardized way that we can define an action type.
So, makes it more straightforward to delete it.
So, now that we have defined an action type,
now where will you send this action type too?
You send this to the store.
Now, within the store,
which part of the state should this be affecting.
So, when you look back at it,
this is going to be sending the various parts of the comment into my store.
And so, it should be changing just the comments part of the state.
So, that's why, in the comments.js file,
this is where I'm going to receive the action and then act on it.
The remaining one is the dishes,
the leaders and the promotions don't need to take
any action when they receive that action.
So, they're just going to ignore that action type here.
Now, in the comments,
when I receive the action type.
So, even here, I'm going to import
the action types just like I did in the action creators.
So, I'll import that here and then here.
This one is supposed to act on the action type.
So, we'll say ActionTypes ADD COMMENT.
So, if the incoming action the type property of that action matches this,
then this reducer function is supposed to do something to the state.
What is it supposed to do to the state?
So, when it receives the comment here.
So, we'll say var comment action payload.
Remember that the payload was a JavaScript object which
contained the various parts of the comment.
Then what we will do is we'll say, comment.id.
Now, I'm going to add in the comment id here at this moment because I don't have
any other place where I can generate the comment id in any way.
So, I'm going to add in the comment id here.
Later on, when we add in a server,
the server will supply the comment id for us.
So at that point,
we'll come back and modify this.
Now, how they generate the comment id?
The comment id will be going from zero,
one, two, three and so on.
So, since our comments file already has several comments,
the number of comments there can be obtained by just saying state.length.
The state here is
the comments JavaScript object that we have imported from the shared.comments there.
So, that comment id,
I'll assign it to state.length here.
Because this comment is a JavaScript array,
and so when I look at the length of the array, well,
it contains a certain number of comments,
the length of the array tells me how many comments they are.
Then we are assigning the comment id in sequential order.
So, the next comment that goes into the array should get the comment id.
Because the comment id starts with zero,
and so that's an easy way of figuring out the comment id for our comment.
Now also, along with the comment id,
I will assign a date field to that.
So, we'll generate a date field.
Recall how the comment objects structure is.
You can go and take a look at that in the comments.js file in the shared folder.
Then you'll see that it also contains a date field there.
That date field I will generate automatically based up on the current date.
So, will say date toISOString,
because you recall that the date is being stored as an ISO string in my comment object.
So, we'll say comment date toISOString.
Then will say return.
Now remember, we cannot modify the state that we have been sent in as the parameter.
I can add to it if you want and then returned the modified version,
but I can't directly go and mutate that state.
So, I will use the concat function on an array that JavaScript supports.
So, when you say state.
concat, what it does is it pushes in the new element into that array,
but that will be a new object that will get created.
That new object that can return.
That way by state itself I'm not mutating in any way.
I'm just concating to it.
So, the concat is an immutable operation on the state,
and that will create a new object and that object I can return from my function here.
So, I'll say state concat comment.
So, this way I will add in the comment into my set of comments,
and then will return that value.
Now, of course, what we're doing here is we're only adding it in memory.
So, when you restart your application,
any comments that you add by filling in the forms will be lost completely.
We are not persisting the changes in any way,
but that question will come back to that in one of the later exercises.
At this moment, this is all that they are doing.
We will add it into the comments array,
and then so the view will be able to show that comment. So, that's the change.
So now, you see how we can implement a reducer function which will not change,
or mutate the state but instead creates a new copy of the state and
then returns that value from the reducer function here.
So now, my reducer part of the function which
manages the comment part of the state has been updated.
Now for the dishes,
leaders and promotions as I said,
when you receive in action of the type add comment they don't have to do anything.
So, they will just ignore that.
The only the comments part of the reducer will make
the change and add the new comment into the comments array there.
Now having done this,
how do we make use of this?
To make use of this,
we will go into the main component.
So let's go to the main component.
In the main component,
recall that we had already mapped the mapStateToProps here.
Now, if you want to dispatch something,
you'll have to map that to dispatch,
map dispatch to props here.
So, how do we make use of that?
So first things first,
we will import the addComment action creator
from redux ActionCreators,
because we need this action creator function in order to obtain
an action JavaScript object which we can then
dispatch to the store by saying, calling store dispatch.