Redux-Thunk explained “Simply”

Hello :)

This is a quicky article.

I am going to explain what is middleware in Redux and what is Thunk.

If you don’t understand Redux well enough, I suggest that you read my article on Redux.

What is middleware?

Reducers in Redux must be always pure functions, which means you CAN’T do any side-effects (e.g fetch API).

Now, this is a problem because you can’t have an “async” logic in your application which means for example you can’t fetch data from an API.

Solution? Middlewares!

Middleware in Redux is a utility placed between the dispatch method and the reducer.

Middleware visualization.

What is Thunk?

Thunk basically is a way to write async functions in Redux.

Let’s break it down!

1- Dispatch the action creator

In React, you dispatch an action creator fetchProducts .

2- A function (action creator) that creates functions 🤔

fetchProducts is an action creator that takes dispatch as an argument and returns a new function, inside of this function you can do any async operation.

After the async logic is done, the new function dispatch a new action creator productSuccess with the data returned from the fetch.

3- An action creator that actually returns an action 🙃

productSuccess is an action creator that returns an action along with the returned data as a payload.

This is the magic of middleware, It is almost like an extension or add-on!

Thank you for reading :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store