DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

ivkeMilioner
ivkeMilioner

Posted 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

Oldest comments (5)

Collapse
 
decker67 profile image
decker

This is something for stack overflow

Collapse
 
axel_nieminen_072275fab50 profile image
niemax • Edited on

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.

Collapse
 
fjones profile image
FJones • Edited on

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!)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout πŸ˜†