DEV Community 👩‍💻👨‍💻


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: {…}}

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

Top comments (5)

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

decker67 profile image

This is something for stack overflow

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? 😊

decker67 profile image

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

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!