Using non-serializable values in Redux store

Using non-serializable values in the Redux store can lead to unexpected behavior, especially when using middleware like redux-persist or tools like Redux DevTools, which rely on serialization for state tracking and debugging.

Common Non-Serializable Values:

1. Functions:
   • Example: const store = createStore((state = {}) => state, { myFunc: () => {} });
2. Promises or Async Functions:
   • Example: const store = createStore((state = {}) => state, { data: Promise.resolve() });
3. Dates and Complex Objects:
   • Example: const store = createStore((state = {}) => state, { date: new Date() });
4. DOM Elements or Class Instances:
   • Example: const store = createStore((state = {}) => state, { domElement: document.getElementById('app') });

---

How to Fix:

1. Keep State Simple:
   Store only plain objects, arrays, strings, numbers, and booleans.
2. Transform Non-Serializable Data:
   • Convert Dates to ISO strings: { date: new Date().toISOString() }
   • Store IDs instead of DOM references.
3. Custom Middleware (for Advanced Cases):
   If you need to store complex objects, create custom middleware to handle serialization/deserialization.

---

Using Redux Toolkit?

It has built-in checks for non-serializable data. If you’re seeing warnings:

• Review your configureStore setup.
• Use serializableCheck: false (not recommended unless necessary): import { configureStore } from '@reduxjs/toolkit'; const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, }), });

---