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

#help #react #redux #javascript

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'
                )
              },
            },

Top comments (4)

FJones • Aug 23 '22 • 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!)