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

Latest comments (5)

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

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.

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.