DEV Community

ivkeMilioner
ivkeMilioner

Posted on • Edited on

I have an error when I want to save to the redux state. A non-serializable value.

I have an error when I want to save to the redux state.

A non-serializable value was detected in action, in the path: payload. picture. Value: FileList {0: File, length: 1}

Take a look at the logic that dispatched this action: {type: 'books/addToListOfBooks', payload: {…}}

<input type="file" {...register('picture', { validate: { lessThan10MB: (files) => files[0]?.size < 1024 * 1024 || 'Max 1MB', acceptedFormats: (files) => { const pictureType = files[0]?.name .toLowerCase() .split('.') .pop() return ( ['jpeg', 'png', 'gif'].includes(pictureType) || 'Only PNG, JPEG e GIF' ) }, }, 
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
fjones profile image
FJones • Edited

Well, a FileList isn't serializable. And redux state should only contain serializable data. That's what the warning is telling you. (Incidentally, the message itself shows why: It can't even properly serialize it for output on the console!)

Collapse
 
decker67 profile image
decker

This is something for stack overflow

Collapse
 
axel_nieminen_072275fab50 profile image
niemax • Edited

Are you severely bothered or can we move on with our lives with this post being in here? 😊

Collapse
 
decker67 profile image
decker

Yes it is the quality I am missing here at dev.to.
Use the right tool for the job and dont spam around everywhere.