How Does Redux-Thunk Work?

The redux-thunk source code is only 14 lines long (sans test and configuration files). It’s just:

It’s so short but powerful that it’s definitely worth trying to understand. In this article, we will try to understand how each line (all 14!) of the library works. In doing so, it will give us insight into not only redux-thunk but how Redux Middlewares work general. First, let’s recall what Redux Middlewares are.

What are Redux Middlewares?

Redux Middleware is code that lets us intercept redux actions before they reach the reducer. redux-thunk is an example of Redux Middleware, along with other popular redux libraries like redux-logger , redux-promise-middleware , and redux-saga (an alternative to redux-thunk ).

Image by designingforscale.com via Understanding Redux Middleware And Writing Custom Ones

The method signature of a Redux Middleware is that it’s a function that accepts store and returns a function that accepts next and returns a function that accepts action and returns a function that returns the result of the dispatch call.

Functional programmers will recognize Redux Middleware as an example of a functor. Here is the function signature of a Redux Middleware:

`store` is the Redux store, while `action` is the originally dispatched. `next` is a function that continues the flow of execution when called with `action` as the argument.

Redux Thunk Gives Redux Side-Effects

In redux , actions creators are functions that return an action, which is a plain javascript objects with a type property.

redux-thunk is a Redux Middleware that lets your action creators return a function called a thunk, instead of an action. This thunk can return an action when invoked but it also has access to the Redux store's dispatch function, meaning it can also dispatch other actions. Typically, API calls are invoked inside these thunks and different actions are dispatched depending on these API responses.

For example, below are two action creators, the first returns a plain redux action. The second returns a thunk, thanks to redux-thunk .

Functional programmers will recognize the redux library as only allowing for a functional style of state management. But with redux-thunk, we can manage state with side-effects via the accessibility to dispatch now available in an Action.

Looking at the Redux Thunk Source Code

With this in mind, let’s take a look at the redux-thunk source code. createThunkMiddleware returns a Redux Middleware but with the store argument de-structured into its dispatch and getState functions.

The core logic of redux-thunk are in lines 3 to 5 . There, we check if the action is a thunk and invoke it if it is. Note by definition of how we use redux-thunk, the thunk’s first argument is the dispatch so we pass that as the first argument of the action thunk.

Some thunks need access to the redux store when dispatching an action, in which case, it can use the getState second argument of the action thunk. For example, a thunk may want to check some conditions on the redux store before dispatching certain actions.

Regarding the third argument extraArgument , we notice that on line 11, we really didn’t use the extraArgument . We just invoked createThunkMiddleware with no extraArgument to create the Middleware which we export on line 14. However, we attached createThunkMiddleware as a property of the exported Middleware in line 12.

This allows us to re-create the Middleware on the fly, with the extra argument if needed:

Summary

• redux-thunk lets us create actions which are functions that can dispatch other functions instead of just objects.
• redux-thunk is an example of Redux Middleware and as such, needs to adhere to the Redux Middleware signature of validMiddleware => (store) => (next) => (action)
• The core logic of redux-thunk is essentially a simple if statement that checks if the action is a thunk (ie. a function) and invokes it if it is. By default, it exports the Middleware with no extraArgument but it then attaches the createThunkMiddleware function onto the exported Middleware to be used if needed.

Feel free to leave comments, questions, suggestions, corrections below. — S