redux thunk pattern composing middleware calls

Question

I'm sure this has been asked and answered, but maybe I'm not able to phrase it correctly to find the right results.

Say I have two redux middleware operations:

a call to create an asset entity in the backend, then update the state with the result
a call to upload the asset data (requires the ID created on the create)

If I want to compose these two middleware operations into a single one how should I go about it? I thought a thunk made sense but I don't seem to have a way to get the resulting ID back from the first dispatch without diffing the before/after state.

What are you trying to compose? What are you trying to accomplish? Are you uploading the asset data to a different place than where it was created? Maybe a minimal reproducible example is necessary to help readers better understand what you are asking. — Drew Reese
– Drew Reese, Commented May 29 at 3:53
I should have known better than to post without an example - wishful thinking on my part - I'll make one up... — micahg
– micahg, Commented May 29 at 13:31

micahg · Accepted Answer · 2025-07-03 01:50:02Z

0

What I found gave me the desired effect was porting my basic operations to RTK Query.

From a thunk, when RTK query actions are dispatched, they can be awaited and there result is returned. For example:

export const createAndNameThing = createAsyncThunk(
  'things/createAndName',
  async (name: string, { dispatch }) => {
    // Step 1: Create the thing
    const createResult = await dispatch(
      thingApi.endpoints.createThing.initiate(undefined)
    ).unwrap();

    // Step 2: Update the thing with the name
    const updateResult = await dispatch(
      thingApi.endpoints.updateThing.initiate({
        id: createResult.id,
        data: name
      })
    ).unwrap();

    return updateResult;
  }
);

answered Jul 3 at 1:50

micahg

365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

redux thunk pattern composing middleware calls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related