The measureMiddleware

Learn how to create the middleware in redux.

Our time-measuring middleware looks like this:

const measureMiddleware = () => next => action => {
   console.time(action.type);
   next(action);
   console.timeEnd(action.type);
};

To create this middleware, we use the time() and timeEnd() console methods that record a benchmark with the name provided as a string. We start the timing before running an action, using the action.type as a name. Then, we tell the browser to print the timing after the action is complete. This way, we can potentially catch poorly performing reducer implementations.

Note: This middleware completely ignores the first parameter (the object holding getState() and dispatch()), as we don’t need it for our example.

Get hands-on with 1200+ tech skills courses.