Implementing New Serializability Checks in Reducers

Showcase how to update reducers to pass the new state serializability checks implemented in Redux v5.0.0.

// Define a reducer function with appropriate serialization
const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_DATE':
      // Instead of storing Date objects, which are not serializable,
      // Store the date as a string
      return {
        ...state,
        lastUpdated: action.payload.toString(),
      };
    case 'SET_USER':
      // Ensure complex objects like Map are converted to a serializable form
      const userMap = action.payload;
      const serializableUserMap = Object.fromEntries(userMap);
      return {
        ...state,
        userMap: serializableUserMap,
      };
    // other cases... 
    default:
      return state;
  }
};

This reducer function is updated to ensure that non-serializable values (like Date objects and Map) are converted into serializable forms (like strings and plain objects) to pass the Redux v5.0.0 serializability checks.

/* Redux store configuration with the new serializableStateInvariantMiddleware */
import { configureStore } from '@reduxjs/toolkit';
import { serializableStateInvariantMiddleware } from '@reduxjs/toolkit/dist/serializableStateInvariantMiddleware';
import myReducer from './reducers/myReducer';

const store = configureStore({
  reducer: {
    myKey: myReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: {
      // Pass the new serializability checks
      isSerializable: (value) => typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || value === null || typeof value === 'undefined' || Object.prototype.toString.call(value) === '[object Object]',
    },
  }),
});

The Redux store is configured with the new serializableStateInvariantMiddleware to enable serializability checks. The `isSerializable` function is redefined to pass values that are serializable.