Blog>
Snippets

Updating Middleware for Redux v5.0.0

Showcase updating custom middleware to comply with the new Redux middleware API introduced in v5.0.0.
const loggerMiddleware = store => next => action => {
    console.log('dispatching', action);
    let result = next(action);
    console.log('next state', store.getState());
    return result;
};
This is an updated middleware using Redux v5.0.0 middleware API that logs the action being dispatched and the new state after the action is processed.
const crashReporterMiddleware = store => next => action => {
    try {
        return next(action);
    } catch (err) {
        console.error('Caught an exception!', err);
        // Here you might send the error to a crash reporting service
        throw err;
    }
};
This middleware catches any exceptions that occur in the processing of actions, logs the error, and rethrows it. A real implementation might send the error to a reporting service.
const myMiddleware = store => next => action => {
    // Logic to handle specific action types
    if (action.type === 'MY_ACTION') {
        // Perform some task specific to MY_ACTION
    }
    // Forward all actions to the next middleware
    return next(action);
};
This middleware includes logic to handle actions of type 'MY_ACTION', and forwards all other actions to the next middleware in the chain.