transloadit / uppy

The next open source file uploader for web browsers :dog:
https://uppy.io
MIT License
29.14k stars 2.01k forks source link

@uppy/store-redux - A state mutation was detected between dispatches #2650

Open dylinmaust opened 3 years ago

dylinmaust commented 3 years ago

I've configured my app for Uppy integration with Redux based on the docs. The store is configured correctly, and I see actions being dispatches on initialization and when I add a file to the DragDrop component. However, Redux is throwing invariant errors after a file is dropped whenever I call certain functions on the uppy instance, like uppy.removeFile(fileId) or uppy.upload():

Invariant failed: A state mutation was detected between dispatches, in the path 'uppy.instance.files.uppy-example-img/jpg-1e-image/jpeg-4613179-1605110492123.data.lastModifiedDate'. This may cause incorrect behavior. (https://redux.js.org/troubleshooting#never-mutate-reducer-arguments)

The data key is the blob object, which is not serializable.

What could be the issue? Surely, others have used Uppy with Redux + custom UI without facing this?

dependencies: "@uppy/core": "^1.14.0", "@uppy/react": "^1.10.10", "@uppy/store-redux": "^1.2.4"

goto-bus-stop commented 3 years ago

Not sure about the state mutation … It's true that Uppy with the Redux Store does store Blobs in your redux state tree, which may be a problem in itself depending on if you do any persistence.

arturi commented 3 years ago

Please re-open if the issue still occures and you could provide steps to reproduce 🙏

marcusstenbeck commented 2 years ago
  1. Create a Next.js app with Redux: https://github.com/vercel/next.js/tree/canary/examples/with-redux
  2. Integrate according to instructions here: https://uppy.io/docs/stores/
  3. Attempt a file upload with Redux Dev Tools open.

The app crashes with exactly the above mentioned error.