React & Modern Frontend (445 Qs)•Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)
What are Redux serializable values?
Redux (and Redux Toolkit's default middleware) expects state and actions to contain only plain, serializable data: strings, numbers, booleans, null, plain objects, and arrays. Values like class instances, Promises, functions, Map/Set, Symbol, or DOM elements are not serializable and shouldn't be put in the store or dispatched inside an action.
javascript
// BAD: Date and a function are not serializable
dispatch({
type: "user/loaded",
payload: { createdAt: new Date(), onDone: () => {} },
});
// GOOD: store a serializable representation instead
dispatch({
type: "user/loaded",
payload: { createdAt: new Date().toISOString() },
});
This matters because:
- Redux DevTools rely on serializing actions/state for time-travel debugging and persisting/replaying action logs.
redux-persistneeds to serialize state tolocalStorage/AsyncStorage.- Non-serializable values can hide subtle bugs (e.g., mutable class instances bypassing Redux's change-detection).
Redux Toolkit's configureStore includes a serializableCheck middleware (dev-only) that warns in the console whenever a non-serializable value is dispatched or stored.