CODEWITHSUNDEEP
reduxredux-toolkit
Fer Toasted
Fer Toasted

Reputation: 1738

Pass extra arguments to thunk payload in redux toolkit

I'm using the createAsyncThunk method to handle an api request with RTK.

However, I can't get to pass extra arguments to the fulfilled response of the thunk. I can only get the data from the returned promise.

The returned promise has this data:

{ items: [ [Object], [Object] ], metadata: {} }

The action:

export const getGroupsBySchoolId = createAsyncThunk(
  'groups/getGroupsBySchoolId',
  async (schoolId, _thunkAPI) => {
    const { items } = await fetch(someUrl); // simplified fetch request

    return { items, schoolId }; // this won't work in the reducer, only if I unwrap() the promise in the component
  },
);

in the slice the builder I'm trying to get the schoolId, but I only get the returned promise.

builder.addCase(getGroupsBySchoolId.fulfilled, (state, action) => {
  // console.log(action);
  const schoolId = action.payload.items.length > 0 ? action.payload.items[0].parentId : null; // i want to avoid this an get it from the payload
  state.items[schoolId] = action.payload.items;
  state.loading = false;
});

The output from console.loging the action, which is of course, the returned promise and the action type:

{
        type: 'groups/getGroupsBySchoolId/fulfilled',
        payload: { items: [ [Object], [Object] ], metadata: {} }
      }

I could create a regular reducer and dispatch it once the promise has been resolved, but that sounds like an overkill that -I think- shoul be solved in the fulfilled builder callback.

Upvotes: 0

Views: 1901

Answers (1)

markerikson
markerikson

Reputation: 67489

Based on your last comment, I see what you're asking - you want to know how to get access to the thunk argument in the reducer.

In other words, given this:

dispatch(getGroupsBySchoolId(123))

You want to to be able to see the value 123 somewhere in the action when it gets to the reducer.

The good news is this is easy! For createAsyncThunk specifically, the thunk argument will always be available as action.meta.arg. So, this should work:

builder.addCase(getGroupsBySchoolId.fulfilled, (state, action) => {
  // console.log(action);
  const schoolId = action.meta.arg;
  state.items[schoolId] = action.payload.items;
  state.loading = false;
});

Upvotes: 1

Related Questions