Using the Redux store middleware

After learning about middleware in general, let's focus more on a specific implementation of the middleware pattern: the Redux store middleware.

While using a similar concept of middleware, Redux middleware solves different problems than, for example, express middleware. It provides a third-party extension point between dispatching an action and the moment it reaches the reducer.

Redux middleware can be used for logging, crash reporting, asynchronous APIs, routing, and much more.

Implementing logging

Let's say we want to log every action that happens in our application together with the new state after the action. Right now, we have already subscribed to the store to log state changes. However, this method does not include information about the action.

Manual logging

The first approach would be manually logging all actions:

const action = addPost('hello world')

if (console.group) console.group(action.type)

console.info('dispatching', action)
store.dispatch(action...