#StateExports

[visionproductions2008]

Part 2 is here! 🗺️✨ Continuing the series of state maps reimagined through their top exports. Can you guess which state this one represents? 🌾🚜 Stay tuned for more artistic takes on the backbone of America’s economy!

[codehunter]

Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up as soon as I switched over to configureStore from createStore:

A non-serializable value was detected in the state, in the path: `varietals.red.0`. Value:, Varietal { "color": "red", "id": "2ada6486-b0b5-520e-b6ac-b91da6f1b901", "isCommon": true, "isSelected": false, "varietal": "bordeaux blend",}, Take a look at the reducer(s) handling this action type: TOGGLE_VARIETAL.(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

After poking around I found the issue seems to be with my custom models. For example the varietals array is created from a varietal model:

class Varietal { constructor(id, color, varietal, isSelected, isCommon) { this.id = id; this.color = color; this.varietal = varietal; this.isSelected = isSelected; this.isCommon = isCommon; }}

and using that I map over an array of strings to create my Varietal array which goes into my state:

// my utility function for creating the arrayconst createVarietalArray = (arr, color, isCommon) => arr.map(v => new Varietal(uuidv5(v, NAMESPACE), color, v, false, isCommon));';// my array of stringsimport redVarietals from '../constants/varietals/red';// the final array to be exported and used in my stateexport const COMMON_RED = createVarietalArray(redVarietals.common.sort(), 'red', true);

When I switched out the model and replaced the array creating utility with something that returned a plain array of objects like this:

export const createVarietalArray = (arr, color, isCommon) => arr.map(v => ({ id: uuidv5(v, NAMESPACE), color, varietal: v, isSelected: false, isCommon, }));

then that got the error to go away for that PARTICULAR reducer, however I have these custom models all through my app and before I start ripping them all out and recoding them simply to be able to use the Redux Toolkit I wanted to ask here if that is REALLY what the issue is before I did that...

https://codehunter.cc/a/reactjs/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using-redux-toolkit-but-not-with-normal-redux

[visionproductions2008]

Exploring the U.S. like never before! 🌍✨ Each state reimagined through its main export, turning everyday goods into art. From Texas oil to California produce, these digital map pieces tell the story of America's economic heartbeat. Which state surprises you the most?