Exercise (Video): Redux Actions

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

Course 2 of 4 in the Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

From the lesson

More Redux and Client-Server Communication

In this module you will explore Redux further including Redux action, combining reducers, and Redux thunk, client-server communication using Fetch and the REST API. You will get a brief introduction to animation in React. You will also learn about testing, building and deploying React applications.

Redux Actions8:52

Exercise (Video): Combining Reducers9:53

Exercise (Video): Redux Actions24:25

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Now, it is time to create our first action for Redux store.

So, what will we do to create the action?

We have just created the comment form

in the assignments that you just completed the third assignment.

In this exercise, we're going to create our first action,

where by the comment that you submit will be added into

the list of comments for our application.

So, we will modify by introducing a new action for our application,

which we'll take the comment and then add it into the comments field.

So, this requires us to change the state of our application.

So, we need an action that enables us to change

the state of our application in the Redux store.

Going to the project.

The first step that we will do,

is to create an action types file here in the Redux folder.

So, going into the Redux folder,

we'll create a file named ActionTypes.js.

And here, we will define the various action types by using string constants.

Now, this is the standard approach for

implementing the Redux actions and the action creators.

So, I'm showing you the standardized template.

For the simple application that we are doing,

we may not need this elaborate arrangement,

but it is better to follow a standardized pattern

for doing things or standardize structure for

how we create the various files so that this can be

used for even larger scale applications.

So, in the action types,

let's create our first action type.

So, we will export a constant

called Add_Comment as you might have

expected and this is exporting your string of the type Add_Comment.

Now, this is an easy way.

So, when you have several action types,

we will follow the exact pattern and then define

all the action types using the same pattern here.

So, we will export multiple constants,

each of which is a string constant that specifies that corresponding action.

And when you define it like this,

then you can import these action types into the reducive functions and then use

that to do the matching in the switch statement that you use there.

So, that's the reason for creating the action types file here.

Now, to create action creators,

we'll create a file named ActionCreators.js file.

So, in the ActionCreator.js file,

we will import everything that has been exported

from the action types file here.

So, we are using again es6 imports here, so again, you are saying,

import everything they add,

all the exports from there as action types in this.

So, this is again, a standardized way of

importing all the action types into our action creators.

Now, from here, let's

export a function called addComment.

Now, what is this addComment?

This is a function that creates an action object.

So, how do you create an action object?

So, this addComment will take in four parameters;

dish Id, rating, author and then comment.

So, this is the data that we included in

the action object that is going to be created by this function and return.

So, in here we'll go ahead and create this.

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.

So once we obtain that, then right here,

we will add in mapDispatchToProps.

Now, this mapDispatchToProps will receive the dispatch as one of the parameters here.

When it receives the dispatch as a,

this dispatch is the dispatch function from

our store that will received it as a parameters.

When you connect that at the bottom,

then automatically this map dispatcher props will receive dispatch as the parameter.

So, when it receives that,

then in here, what is this going to do?

This will, I need to surround

this with parenthesis here.

Then in here, we will define a addComment property here,

which takes the dishId,

rating, author, comment as the four parameters.

Then what does it do?

Then it will dispatch into dispatched action.

How do we obtain the action?

To obtain the action,

we use the addComment action creator.

Now, the add comment action creator needs to be passed these four parameter values.

So, we'll just copy

these four parameter values here.

These four are passed as parameters to the add comment and so, that will dispatch.

Now, what does this do?

So as you see, this function call where we're calling

the action creator will return the action object for adding a comment,

that action object is then given as a parameter to the dispatch function here.

So the dispatch function obtains that as a parameter,

and that we are supplying as a function here,

and this can be used within our component here.

So, now that we have specified that,

then what we need to do is to supply that as a parameter to the connect.

So, going down to the connect we'll say mapDispatchToProps.

So when you connect to that,

then those that we define in the mapDispatchToProps will become available,

so this addComment function will become available within my main component.

Now, how do we make use of it become the main component?

So going into the main component,

here we are supplying the dish and

the comments as the two attributes to the DishDetail component.

Now along with these,

I will pass in the third attribute also,

which is the addComment attribute which would

be this.props.addComment, that's it.

So, this function that you've just created will be passed in,

this one will be passed in as an attribute to the DishDetail component.

So inside the DishDetail component then I can make use of this function to

dispatch the action to my store.

Because it's in the DishDetail component that I have

access to the comment that the user just submitted.

Right. So, we will have to go into

the DishDetail component and then make use of these in there.

So, let's go to the DishDetail component,

and in the DishDetail component,

will walk down to the bottom here,

and then as you implemented the DishDetail component,

you would recall that we were supplying for

the RenderComments we were supplying the comments here and so,

we will also supply two more attributes to the comments here,

the two more attributes are addComment,

which came in as prominent to this,

so we'll say, props.addComment.

It came in as props to the DishDetail component.

And then one more that I will pass in is the dishId,

because the comments itself doesn't know the Id of

the dish for which the comments are being rendered so,

I will pass in the dishId

as props.dish.id because we will need that in the function there.

So, two more will be passed into the RenderComments function there.

So, go into the RenderComments function here.

So, in the RenderComments function along with the comments,

you'll also receive the addComment and then the dishId,

two more in the props for the RenderComments so add comments in dishId.

Now, what do we do with these two?

We just need to pass these two directly to the CommentForm.

So, where we use the CommentForm,

we'll pass the two to the CommentForm there,

so we'll say dishId is dishId

and then addComment is addComment.

Now, these have been the dishId and the addComment,

these two have been extracted already from the props,

so they are available to us here,

so we'll pass them to

the CommentForm comportment that

you have implemented as part of your previous assignment.

So, going into the CommentsForm without showing you the details of how I implemented it,

in the CommentsForm component,

what I'm going to do is instead of popping up these as an alert,

I will simply say this.props.addComment,

this.props.dishId, and then values.rating,

recall that the values is supplied as the parameter to the handle submit,

and then we saw the structure of the values there, so values.rating,

values.author, so recall that the addComment takes four parameters, dishId,

rating, author and comment.

So, these four will be passed in as the parameters to the addComment function there.

But this, when you submit a comment,

you will see that the comment gets added into

the list of comments for that particular dish.

Having made all the changes,

let's save all the changes and then go and take a look at our application.

Going to the browser, let's go to the menu and then go to a specific dish,

and then let's now click on the ''Submit comment'',

and then this model pops up,

let me select a rating value and then I'll just

type in a rating value here and a comment here,

and then submit the comment and then when I do that,

you will immediately notice that the new comment has joined

the list of comments for this dish here.

So, you'll say this is a test comment,

and then you can also see that the date and my name have been rendered here.

So that is the effect of the change that you have made to your application.

So, when you submit the comment,

you'll see that the submission of the comment will

trigger action to be sent to your redux store,

and then this action will result in the comment being added

into the comments part of the state of your redux store,

and then when the changes,

then that will result in the store emitting a change,

and that will result in your main component

going and getting the updated state from the redux store,

and then the main component passes the new state to all the chilled components,

and then when you come down

the RenderComments component realizes that the comments part has changed,

so it will have to be rendered.

So, react takes care of re rendering that with new the comment added into the list there.

So, now you see how an action can trigger a change in

the redux store and that immediately gets reflected

back into our react applications view there.

With this, we complete this exercise where we have examined our first redux action.

This is a good time for you to do a get comment with the message redux actions.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play