fulfillWithValue creates wrong TS types for action.payload

[markerikson]

Originally seen while working on #2884 .

If you do return fulfillWithValue(someValue) in createAsyncThunk, the TS typings end up thinking that the final return type is the contents of that FulfillWithMeta object. This results in TS thinking that action.payload.payload.anyNestedField and action.payload.meta are valid, even though internally we do fulfilled(action.payload).

Example:

export const getObj = createAsyncThunk(
  'slice/getObj',
  async (_: any, { fulfillWithValue, rejectWithValue }) => {
    try {
      return fulfillWithValue({ magic: 'object' });
    } catch (rejected: any) {
      return rejectWithValue(rejected?.response?.error || rejected);
    }
  }
);

export const mySlice = createSlice({
  name: 'slice',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getObj.pending, (state) => {
        state.loading = true;
      })
      .addCase(getObj.fulfilled, (state, action) => {
        state.loading = false;
        // ERROR This does not match
        state.obj = action.payload;
      })
      .addCase(getObj.rejected, (state) => {
        state.loading = false;
      });
  },
});

Looks like it's been broken since at least 1.8.

[markerikson]

Out in https://github.com/reduxjs/redux-toolkit/releases/tag/v1.9.1