Blog>
Snippets

Middleware Compatibility with Object.create(null)

Code example showcasing how to write a Redux middleware that can handle state objects created with Object.create(null), ensuring data flow and action handling are unaffected.
const customMiddleware = store => next => action => {
  // Check if the state is created using Object.create(null)
  const isPlainObject = obj =>
    typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === null;

  // Get the current state
  const state = store.getState();

  // If the state is a 'plain' object, handle it, otherwise pass the action
  if (isPlainObject(state)) {
    // If needed, transform the state or handle it differently here
    console.log('State created with Object.create(null) detected');
  }

  // Continue with the next middleware or to the reducer
  return next(action);
};
This custom middleware checks if the state is a plain object (created using Object.create(null)) and logs a message if it detects such an object. It then continues with the normal action handling by calling the next middleware or reducer.
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(customMiddleware),
});
This code configures the Redux store with the rootReducer and adds the custom middleware to the existing middlewares returned by getDefaultMiddleware.