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

Top 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.

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!