2

I currently have a Redux action that looks like this:

{
  type: 'user/updateRequested',
  payload: {name: 'Foo', avatar: File}
}

that File is not serializable so I'm wondering if there's a better way.

When the action is dispatched, three things happen:

  • A reducer updates the state.user.name but ignores avatar
  • A Saga uploads the file to the API
  • A Saga uses a FileReader to get a Data URL and dispatch another action (which causes state.user.avatar to be updated)

I'm never storing the File object in the store, it's only in actions.

Is there a better way or is this a use case where non-serializable actions are valid?

4
  • I use the same approach so I think is fine (because did not find a better solution). Jan 28, 2020 at 8:04
  • Just out of interest, are you performing any compression on the file? Jan 28, 2020 at 8:19
  • @MattSugden No, it's straight from an <input> - myInput.files[0] sagas read/upload that file from the action
    – Jake
    Jan 28, 2020 at 12:06
  • I was asking as I've just done something similar, and when taking a picture on an iPhone the image is around 4MB, which is a lot to be uploading and downloading. Jan 28, 2020 at 13:28

3 Answers 3

3

The file is serializable in theory (base64 for example) but it would probably make using the devtools harder or cause other unexpected side effects with that much data.

I agree that it's valid to not store the actual file content in action payloads.

You could save a hash of the file (or simply the name and a timestamp) and use this as a key to access the file in another type of storage if it becomes necessary to have the content. This would make time travel work again, but only if the actions are replayed in the same environment where the file content can be accessed.

0
export default configureStore({
  reducer: {
   \\Put your reducers here
  },
  middleware:getDefaultMiddleware({
    \\this way you don't remove the middlewares
    serializableCheck:false,
  }),
});
-1

I faced the same issue. This is how had configured my store.

export default configureStore({
    reducer: {
      vehicles: vehicleReducer,
    },
    middleware: [...getDefaultMiddleware(), apiMiddleware],
});

Once I got rid of getDefaultMiddleware, the error was gone for me.

1
  • 2
    This will indeed remove the warnings and errors from the log. But, it's just ignoring the problem. By removing the default middlewares, you are removing thunk middleware, or, in production, immutableCheck and serializableCheck middlewares as well. These two check the data going into redux actions and state. By removing serializableCheck middleware, the warnings and errors go away.
    – bmakan
    Oct 23, 2020 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.