Blog>
Snippets

Middleware for Unknown Actions in Redux

Implement a Redux middleware that logs a warning when an unknown action is dispatched to the store, helping maintain a predictable state flow.
const unknownActionMiddleware = store => next => action => {
  // This array should contain all known action types
  const knownActionTypes = ['ACTION_TYPE_1', 'ACTION_TYPE_2', 'ACTION_TYPE_N'];

  // Check if action.type is not in knownActionTypes
  if (!knownActionTypes.includes(action.type)) {
    // Log a warning for an unknown action type
    console.warn(`Unknown action type: ${action.type}`);
  }

  // Pass the action to the next middleware or to the reducer if no other middleware is chained
  return next(action);
};
This Redux middleware function checks if the action dispatched is known. If the action type is not recognized (not included in the knownActionTypes array), it logs a warning and then passes the action on to the next middleware or the reducer.
import { applyMiddleware, createStore } from 'redux';
import rootReducer from './reducers'; // import your root reducer

// Apply the unknownActionMiddleware
const store = createStore(
  rootReducer,
  applyMiddleware(unknownActionMiddleware)
);
This code imports the applyMiddleware and createStore functions from Redux, imports the root reducer, and then applies the unknownActionMiddleware when creating the Redux store.