Exercise (Video): Introduction to Redux

Loading...

Do curso por The Hong Kong University of Science and Technology

Front-End Web Development with React

141 classificações

The Hong Kong University of Science and Technology

Front-End Web Development with React

141 classificações

Curso 2 de 4 em 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

Na lição

React Forms, Flow Architecture and Introduction to Redux

In this module you will be introduced to uncontrolled and controlled forms and briefly examine form validation in React applications. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the flux architecture

The Model-View-Controller Framework7:18

The Flux Architecture11:46

Introduction to Redux20:28

Exercise (Video): Introduction to Redux23:01

Conheça os instrutores

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

In the previous lecture,

I had briefly introduced you to Redux.

I had introduced several concepts about Redux.

But again, to consolidate your understanding of Redux,

what better way than to actually do an exercise,

where you apply these concepts and learn it by doing.

So, this is the start of our learning of Redux,

and how we can use Redux with our react application.

Now, the next several exercises will see me using various aspects of Redux,

and updating our react application.

Our first step is to update our react project to use Redux.

So, to do that lets install Redux,

and react-redux into our react application project,

that we have been working on so far,

so going to the terminal at the prompt, type yarn

add redux@3.7.2. that's the version that I'm using in the scopes.

So we'll install redux into

our react project and also as we understood from the previous lecture,

along with redux we also need react-redux

to provide us with a way of connecting our react application to redux.

So, add the prompt type yarn add

react-redux@5.0.7.

So that's the version that I'm going to be using in the project.

Now, you can also do NPM install as I have mentioned several times before.

So, now that we have installed redux and react redux into our project,

it's time to go and update our application.

Going to the application in the visual studio code here,

the first thing that I'm going to do is in

the source folder I'm going to create a new folder,

and name it as redux.

As you would expect,

all redux related code I will capture it into this redux folder.

Now, within this redux folder,

the first step I'm going to create a reducer function there.

So to do that,

let's create a file named,

reducer.js in the redux folder.

Now, the reducer.js file is where I will implement my reducer function.

So, as you recall from the lecture,

the reducer function is a pure function.

So, how do we implement that?

Now, I will also need to update the main component to make use of redux.

So, let me go to the main component,

and am going to cut out this from the main components.

So the dishes, comments,

leaders, and so on.

I'll cut it out from the main component,

because my main component will now obtain the state from my Redux Store.

So, I move all that into reducer because this is where they will set up our state.

So, dishes, comments, leaders and promotions I have moved them in to reducer.js file.

Now, in addition, before I set up the reducer function let me create

a constant named initialState,

this is nothing but a JavaScript object here, initialState.

Now how do I initialize this initial state?

Now, this would contain

exactly the same structure as the state that you see in your main component.

So, I'm going to remove the state from the main component,

because I will no longer need that there and then move

that whole thing into this initial state here.

Again, going to the main component I'm going to remove

the state from the main component completely,

because I won't need that there anymore.

So, you'll notice that I am simultaneously updating main component, and reducer [inaudible].

So now, what this is specifying is,

this is the initial configuration for my state.

Now later on you will see me updating this

in a bit more detail as we go through the exercise.

Now, to create our first reducer function,

we will export the reducer from here.

So, we'll say export const reducer.

So, this is reducer function that I'm going to create.

What is this reducer function?

This reducer function is going to receive the current state,

and then an action.

So as you'll recall to generate the next state we need the current state and an action.

So, these are the two parameters my reducer function is going to receive,

and this as I said is a pure function,

and so I cannot modify the state directly here in the reducer,

I can only do an immutable change and

then return an updated version of the state from this reducer.

So, that is what the reducer functions job is.

Now, at this moment I don't have

anything to do because I haven't implemented any actions.

So, what I'm going to do is as a default I will just return the state,

so I'm not modifying the state in any way so,

I'm just returning the current state from the reducer function.

This is good enough to get started in this exercise.

We need to set up the reducer function because our store needs to

know what to do when an action is dispatched to it.

So that's the way we set up our reducer function.

Now, also we will make use of

the ES6 way of specifying a default value for a parameter.

Now, when the reducer is called initially,

at the start of your application your state will be uninitialized.

Now, when your application is started you want to

initialize your state to the initial step that we have just specified earlier.

What is this initial state?

This initial state contains four properties,

dishes, comments, promotions, and leaders.

We have seen why we need these in our application.

So, what I'm going to do is I will make use of

the ES6 way of defining

functions where you can specify the default value for a parameter,

and then I'll say,

state equals to initialState.

So, when the reducer is first called by my store,

my store would have no state,

so the stage will be uninitialized.

So it will be undefined there.

So, in order to avoid issues with that I'm going to say that if the state is undefined,

the default value will be initialState which I have just defined earlier.

So, that is what I'm going to be supplying to my reducer function here.

So, this reducer function right now it is not doing anything,

it is just returning the state as is because I haven't defined any action,

so I'm just going to return the state as is,

and that is good enough.

This is a pure function here.

It is not changing the state in any way,

so it is just returning the current state as is as a starting point.

Now, that we have created the reducer function let's also configure our store here.

So, I'm going to introduce another file here named configureStore.js.

Now, this is just convenience,

you don't have to do it this way but I find it convenient to do

the store configuration in a specific file and then export that from there.

So, this is just my way of doing it,

you would see examples of use of redux where they don't necessarily follow this approach.

Again, as I mentioned the createStore is made available from redux.

So I'm going to import the createStore from redux.

What does createStore allow me to do?

It allows me to create the Redux Store and then also,

let me import the reducer and initialState.

Now, I have exported both of these

from the reducer.jsfile that I've just implemented early.

Now, why do I need these?

Because I need these to configure our store.

Then from here I will export a function named ConfigureStore.

Now, this ConfigureStore function is required

because that is how I'm going to configure my store.

Now where do I configure my store?

We'll come to that in a short while.

Now, when you configure a store you will need to create the store here.

So, we'll say const store equal to.

We have just imported this createStore here,

so we'll say createStore.

Now, this createStore itself takes two parameters here.

So, as you see the createStore takes a reducer and also some other parameters,

and then an initialState if required.

Okay, so that's that two parameters that this store takes.

So, in the createStore here I'm going to supply those two parameters to my store here.

So, this is how you create a store or Redux Store in your application.

So, reducer and then I will supply

the initialState as the two parameters to my createStore.

Then, from this function ConfigureStore I'm going to

return the store that I have just created.

So, when somebody calls this ConfigureStore it will configure my Redux Store.

So that's the purpose of this function that I've just implemented here.

Again, as I said, this is just a pattern that I

follow and you don't necessarily have to follow

this pattern but I find this

convenient to use this approach for implementing my application.

Now, that we have created the Redux Store,

or rather we have at least have a function that enables us to create the Redux Store,

let's update our application to make use of this store.

So, to do that we will go into the app.jsfile.

In the app.js file,

I'm going to import the providers,

recall I mentioned about the provider in the lecture,

this provider component I import from react-redux.

So, the provider is part of react-redux.

Now, this provider component allows me to configure my React application so

that the Redux Store becomes available to all components in my application.

Also, I will import ConfigureStore,

the ConfigureStore function that I've just implemented earlier,

from, where do I have that?

In the Redux folder in the configureStore.js file there.

So, I import that from the ConfigureStore,

and then I need to configure my application.

So, here I'll say, const store ConfigureStore.

So, when I call,

so I need to define this here, const store ConfigureStore.

So, now my Store becomes available to me.

Now, within my render function,

I will surround this with provider,

and this provider as I said takes one attribute which is the store attribute,

where I supply the Store that I have just created here as

the parameter to my application.

So, I need to surround my React application with this provider here.

That's it. So, when I do this, my Store,

React Store becomes available to all the components within my React application.

So, that's the change that I need to make to the app.js file.

Now, the last step is to make use of the Connect from

react-redux to connect my React application to the Redux Store.

So, that we do in the main component.

So, we'll go into the main component,

and within the main component if we are making use of the react-router,

we also need to import this withRouter from reactor-router-dom,

because that will be required for configuring my React Component to connect to Redux.

So, we'll say, withRouter that is required from there,

and then I will also import

Connect from react-redux.

So, as you saw the Connect method is available from react-redux.

So, once I obtain the Connect from react-redux,

so how do I connect my main components?

So, because this is the component where I was

earlier holding the state of my application,

now this main component needs to go and obtain that state from the Redux Store.

So, to do that I need to connect this component to my Redux Store.

Before I connect this component to my Redux Store,

I also need to define

the

mapStateToProps

function which

obtains the state as a parameter here.

Now, this function that I defined here, mapStateToProps function, again,

let me define that outside the class there.

This mapStateToProps function will then return.

What this does is that this will map

the Redux Store's state into props that will become available to my component.

So, here what I'm going to do is,

I'm going to map all the state.

Recall how we define the state for my main component,

we had four properties within the state, dishes.

Now, this dishes will become available from my Redux Store's state here.

So, this state that I am obtaining here is the state from my Redux Store.

So, from the state,

recall how we defined the state,

if you're going to the reducer,

so you saw that the initial state was defined with full properties,

read dishes, comments, promotions, leaders.

We need access to these four within my main component.

So, in my main component I'm mapping each one of them

into properties that become now available to my main component.

So, I'll say dishes: state.dishes,

then we'll say comments: state.comments, again,

don't forget the comma there,

then we'll say promotions: state.promotions,

and then, leaders: state.leaders.

So, these four now will become available as props to my main component.

How did they become available as props to my main component?

These are derived from

the Redux's Stores by connecting this component to the Redux Store.

So, how do we connect this component to the Redux Store?

Now, to connect the component to the Redux Store we'll go down here,

and then we will wrap this Main that we define here inside a Connect.

So, let's surround this Main by parenthesis,

and then we will enclose this inside one more parenthesis,

and then here we'll say,

connect and connect takes

mapStateToProps as one of the parameters here.

This mapStateToProps, we have just defined that function earlier.

So, that is supplied as, again,

it also takes another one column maps dispatch to state here but,

so again, you can see what mapStateToProps is supplying for us,

and it also takes mapDispatchToProps, right.

Now, I don't have any dispatch related properties available.

So that's why I'm not supplying that here,

but in the related exercise we will introduce that here.

Now, if you are using the React Router,

then in order to make this work you need to surround this with inside the withRouter.

So, now you see why I imported withRouter from react-router-dom.

So, this is how you will end up connecting your component to the React Router.

So, once we have done with this,

then we go into our main components class definition.

Inside this main component,

all the Redux state becomes available as props,

hence the name mapStateToProps.

So, whatever we were using as this state here will have to be changed to this props,

because the props will come in as properties for the main component,

because we defined it this way,

and then connected the main component to my Redux Store.

So, everywhere you see this.state,

you change that to this.props.

So, remember to go through your entire code in the Main Component and then update

every one of them this.props.dishes.

So, DishWithId needs to be updated and then,

do I see the dish.state anywhere?

Okay, there and then there,

I think that's about it.

Now, one easy way for me to make sure is let me search

for this.state within this file,

and I don't notice any of this.state anymore in this file so,

that means that I have completed all the updates.

So, once I have done this,

let's save all the changes that we have

made and then go and take a look at our application.

Going to the application in the browser,

you'll see that my application is working just like before.

About Us, Menu, Dishes,

Contact us, everyone of these is working just like before and back to the home component.

So, now you see that we have updated our React application to make use of

Redux behind the scenes to store the state of our application,

and then connected our main component to the Redux Store,

so that the main component obtains

its state information from the Redux Store for our React application.

With this we complete this exercise.

In this exercise, we have taken our first steps

to bring Redux into our React application,

and then connect our React application with Redux,

and then make use of the Redux Store for sorting the state of our application,

and then obtaining the state into our React application using react-redux.

This is a good time for you to do a git commit with the message intro to Redux.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play