Navigation Redirects Through Redux Middleware

Routing in client-side applications usually starts off as a small number of routes with a few redirects or custom code here and there. But as soon as the application starts to grow and the number of features on it increases, routing commonly becomes a hard to maintain and complex domain. Ever more interactive client-side applications require an intuitive and consistent routing solution to provide a better UX, and we as developers must make sure we use equally intuitive and consistent design paradigms to deal with complex routing requirements.

The goal of this blog post is to explain how to use Redux middleware to create a solution for client-side navigation redirects which is intuitive, scalable, and easy to maintain.

A Redux Walk-through

Redux is a predictable state container for JavaScript applications. It offers a simple solution for storing and handling state changes. Redux can be used with any view library, though it’s very commonly used with React.

In Redux, the whole application state is stored in a single place: the store. The state of the application can only be modified through an action. When an action is dispatched, it's handled by a reducer which proceeds to update the store as needed.

A Redux middleware provides and extension to the Redux work flow. It allows the developer to capture an action and execute some custom code before or after it's dispatched.

Redux Middleware In Action

Let’s now assume we are working on a simple TODO application using React and Redux. The TODO application allows a user to see all TODO’s at / (the index route) and click a single TODO at /:todoId to view its details. We want to add a new feature to our TODO application: give the user the ability to delete a single TODO when viewing its details at /:todoId. If the TODO is successfully deleted, the user should be redirected to the index page.

In order to delete a TODO, we create a couple of new actions in the application:

Our goal is to create a Redux middleware that is executed right after the TODO__DELETE__SUCCESS is dispatched and redirect the user to the index page. Here's how we are going to do it:

  • First, let’s create a utility method which will allows us to create a Redux middleware and execute custom code before or after the action is dispatched:
  • Next, we’ll use the created utility method to define the redirect code. Notice I have defined an afterHandler, which will effectively execute the code after the action has been dispatched:
  • Last thing needed is to apply the Redux middleware to the store, here’s how to do it:

Conclusion

I have been using Redux middleware for handling navigation redirects for quite a while now, and this solution has proven to be intuitive, scalable, and easy to maintain. Redux middleware are also commonly used for logging, crash reporting, and talking to an asynchronous API.

Do you have a different solution for dealing with navigation redirects in client-side applications? Leave a comment below :).