Async Actions in Redux: Thunk vs Custom Middleware

Managing Asynchronous Actions with Redux

Asynchronous actions can be a challenge when working with Redux, as the state management tasks are synchronous by nature. However, there are ways to enable state transitions involving asynchronous actions while complying with Redux’s architectural pattern.

Splitting Asynchronous Actions

One approach to integrating asynchronous tasks into the Redux architecture is to break down an asynchronous action into at least three synchronous actions:

1. Started
2. Successfully completed
3. Failed

Each of these actions changes the application state and keeps it in line with what is happening during the asynchronous task execution.

Using Thunk Middleware

Redux Thunk is a middleware that allows you to create actions as functions that have business logic. It verifies if an action is a function and executes it if it is. This simple behavior enables us to define an action as a function that starts an asynchronous task and delegates its execution to the Thunk middleware.

Here’s an example of using Thunk middleware to manage asynchronous actions:

“`javascript
import { createStore, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;

const store = createStore(reducer, applyMiddleware(thunk));

const getQuoteAction = () => {
return dispatch => {
dispatch({ type: ‘QUOTEREQUESTED’ });
fetch(‘/api/quote’)
.then(response => response.json())
.then(quote => dispatch({ type: ‘QUOTERECEIVED’, quote }))
.catch(error => dispatch({ type: ‘QUOTE_FAILED’, error }));
};
};
“`

Creating Custom Redux Middleware

While Redux Thunk is a widely used middleware for async actions, it forces you to alter the original nature of an action creator. Creating custom middleware can be a more scalable and maintainable solution.

Here’s an example of creating custom middleware to manage asynchronous actions:

javascript
const httpMiddleware = store => next => action => {
if (action.type === 'HTTP_ACTION') {
const { url, method, headers, body } = action.payload;
fetch(url, { method, headers, body })
.then(response => response.json())
.then(data => next({ type: 'HTTP_SUCCESS', data }))
.catch(error => next({ type: 'HTTP_ERROR', error }));
} else {
next(action);
}
};


Conclusion

In summary, we discovered that any asynchronous action can be split into at least three synchronous actions. We exploited this principle to implement two approaches for managing asynchronous actions while using Redux: using Thunk middleware and creating custom middleware. While both approaches have their advantages and disadvantages, creating custom middleware can be a more scalable and maintainable solution.