Passing non-serializable blobs to async thunk payload creators: best practices?

[wchargin]

Hello! I have an application that uses a Redux Toolkit slice with a create.asyncThunk that makes an HTTP request to post an image to a web server. The image size is on the order of 500 kB to 2 MB, and is passed into the payload creator as a Blob. The payload creator makes a POST request, waits for it to succeed, and then returns a small, serializable JSON object with some metadata as the payload for the fulfilled action.

This works well in practice, and, as far as I know, no non-serializable state ever makes it into the store's state. However, the non-serializable Blob does appear on the meta.arg of the lifecycle actions for the async thunk. In the Redux dev tools, the action's meta.arg.blob just shows up as {}, but if I console.log from the fulfilled reducer, I can see that the blob is actually still there. None of my reducers actually read the meta.arg at all, so even if this property were lost in a serialization roundtrip, it wouldn't affect replayability.

I know that the Redux style guide says that keeping non-serializable values out of "state or actions" is "essential", and generally I like to try to follow those rules when possible. Is there a good, simple, easy alternative here? I don't really need the blob to be part of the action; it just kind of makes its way there by default.

I'm aware of options.getPendingMeta, but it's not clear to me if that can be used to omit parts of the arg.

For concreteness, my code looks something like this:

export const apiSlice = createAppSlice({
  name: "api",
  initialState,

  reducers: (create) => ({
    postImage: create.asyncThunk(
      async (args: {
        slug: string;
        blob: Blob;
      }): Promise<{ id: string; slug: string }> => {
        const { slug, blob } = args;
        const response = await fetch(`/upload/${encodeURIComponent(slug)}`, {
          method: "POST",
          body: blob,
        });
        const { id } = await response.json();
        return { id, slug };
      },
      {
        fulfilled: (state, action) => {
          const { id, slug } = action.payload;
          state.uploadedImages[slug] = id;
        },
      }
    ),
  }),
});

[markerikson]

Yeah, RTK's serializability middleware does already default to ignoring that action path specifically for this reason:

ignoredActionPaths = ['meta.arg', 'meta.baseQueryMeta'],

As you noted, it doesn't get serialized across to the devtools, so in a sense that's "broken"... but it's also not realistically likely that you needed to inspect the blob in the devtools anyway. Also, as much as we've always tried to keep actions serializable to enable the time travel debugging aspects, in practice few people make use of that. So, if you do end up passing non-serializable values as a thunk arg, it's not the end of the world, and we tweaked the serializability middleware to account for that.