Redux Thunk

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Front-End Web Development with React

100 calificaciones

The Hong Kong University of Science and Technology

Front-End Web Development with React

100 calificaciones

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

De la lección

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 Thunk10:08

Exercise (Video): Redux Thunk50:07

Exercise (Video): React-Redux-Form Revisited12:34

Conoce a los instructores

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

In the previous lesson,

we have seen how we can effect changes to the state in the store,

by dispatching Redux actions.

Now sometimes when you dispatch a Redux action,

you may want to intercept it on its way to the tool and make

some modifications to the action before letting it pass through on to the store.

Now this is where the Redux Middleware and Redux Thunk come to our help.

Let's examine this in a little more detail in

this lecture and then in the exercises that follow in this lesson.

So, what exactly is Redux Middleware?

And what role does it play in our Redux application?

The Redux Middleware provides the capability to run a code after an action is dispatched.

As I said in the introduction before it reaches the reducer.

Now once an action reaches the reducer,

the reducer will act on the action and make changes to the state of the store.

So before that point,

you can intercept action and effect some changes before the action reaches the reducer.

So this is a place which enables

third party extensions to be injected into your Redux application.

So for example, if you want to log all the actions that have been dispatched,

that is a good point for you to first capture the action,

log what the action is and then let it move on to the reducer,

and then you can then log the state of the application after the action is effected.

Now, this is one example of a situation where a middleware will be effective in capturing

information about what is going on within your Redux application.

Similarly, if you want to allow asynchronous API calls, so for example,

you dispatch an action but the action would initially require access to

a server from radio fetch the data and then send the data into your Redux store.

Then that is also a good place to interject a middleware in order to

intercept the action and then carry out basing API call and

then let the action proceed forward into the store.

So, how does this middleware work?

So this middleware forms a pipeline that wraps around the dispatch.

So as you saw, when you need to send an action to that store,

you dispatch the action to the store.

So this wraps it on the dispatch and then

it can make any changes there and it can pass that action forward.

If it requires, it can restart the dispatch pipeline as it is required.

And not only that, at that point,

you even get access to the store state.

If you want to look at the store state and then

make any modifications before you let the action pass through.

So that is what the middleware gets access to.

So what can we use the middleware for?

So here are the few examples of things that you can do

with the middleware that you interject into your Redux application.

So the middleware can be typically used for

inspecting the action and then also the state.

You can even modify the action,

you can dispatch all that actions and then wait for the results from

those actions before you allow this particular action to take place,

you could even stop an action from reaching the reducers if it

is something that you wish to do, and so on.

So there are many applications for a middleware that allow you to achieve your end goal.

Then you need to use the middleware in

your Redux application then you use

that applied middleware function that is available from Redux,

and so this will enable you to set up the middleware pipeline,

and then this returns a store enhancer.

So when you call ''Apply middleware,'' it will return

a store enhancer which you can then pass in as

a parameter to the create store function that we have

already seen being used when we created the store.

So that is how we will apply them middleware for our application.

Let's now talk about thunk.

That sounds terrible, right.

Like something falling out of the sky onto your head.

If that is what you think thunk is,

then you will thank me at the end of this lecture for changing your thinking on thunk.

So what exactly is thunk?

So thunk is in programming.

What we mean by thunk is a subroutine that is used to

inject an additional calculation into another subroutine.

So this is a way to delay a calculation and its result is

needed and also allows you to insert

operations at the beginning or the end of another subroutine.

Now that may not make much sense to you at this moment but when we look at Redux Thunk,

then it'll become a lot more understandable about what exactly the purpose

of thunk is in the context of a Redux application.

So let's talk about Redux Thunk.

So what exactly does Redux Thunk do for you?

A Redux Thunk is a middleware.

So again this is one kind of a middleware that allows you to

write an action creator that will return a function instead of an action.

Now if you recall the way you wrote action creators

earlier in the exercise in the previous lesson,

the action creator was returning an action object and then we were

passing that action object through the dispatch to the store.

Now a thunk allows you to return a function from an action creator.

Now when you return a function from an action creator,

then that function can be executed and within that function,

you can design it in such a way that you can use it to delay the dispatch of an action.

So for example, you can delay the dispatch of an action until a certain condition is met.

Say for example, if you want to do a synchronous API call to a server,

you may use a thunk in order to generate a synchronous API call,

and then when the server replies and you receive the reply,

at that point you can let the action proceed

forward and then make modifications to the store.

So this is a good example of where a thunk or a Redux Thunk will be very useful for us.

So the inner the function,

so as yours as you saw,

a thunk is a function that returns a function.

So the inner function that you define inside a thunk

gets access to both the dispatch as well as get state store.

What does this permit you to do?

Because you have access to get state,

you can examine the state and then see if

this action fits and can be allowed with the current state.

So that would allow you to even modify the action,

and also you'll get access to dispatch.

So for example, you can stop the current action,

do something else, come back and then dispatch the action into the reducers.

So that is what a Redux Thunk allows you to do.

Now with the availability of Redux Thunk,

it allows you to do complex synchronous logic.

So for example with one action,

you can actually end up dispatching multiple dispatches and

may cause multiple effects if that is what you intend to do.

You can even do conditional dispatch depending on the condition.

So for example, if you issue an synchronous API call to the server,

and if the server returns the result successfully,

then you can dispatch one action to the reducer.

If the API call returns a failure,

then you can dispatch a different action to

the reducer to make changes to the state accordingly.

So this kind of thing is easily supported by using a Redux Thunk.

Indeed, this is exactly how we will make use of Redux Thunk in the exercise in

this lesson and also later on when we look at communicating with a server.

Also, Redux Thunk supports simple synchronous logic and so that is

where doing simple async calls to a server can easily be supported using Redux Thunk.

If you want a more powerful way of doing things,

then we have access to another library called a Redux Saga.

Now, I'm not going to go into a Redux Sagas in this course,

that is a little too advanced for us in this course.

So we will only stay with Redux Thunk.

A Redux Saga allows you to use ES6 generators to generate possible functions.

Now from the examples that we look at in this course,

we don't need that complex asynchronous logic

so I'm not going to go into Redux Saga at this moment.

We will differ that to an advanced course later on.

And also, the saga allows

ongoing background thread like operations or processing behavior if you so require.

So complex react applications that require that kind of behavior

would definitely benefit by using a Redux Saga in the place of a Redux Thunk.

But for the simple example is that we've a look at,

a Redux Thunk is more than sufficient to cover

all the essentials that we need for our Redux application.

With this quick understanding of Redux Thunk,

let's move on to the exercise where we will apply

the Redux Thunk and we will see what we will achieve by using a Redux Thunk.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play