title: How to use createAsyncThunk with Typescript? How to set types for the `pending` and `rejected` payloads?
body: <p>Right now I've got these actions that I use for an upload thunk's lifecycle.</p>
  <pre><code>type UPLOAD_START   = PayloadAction&lt;void&gt;
  type UPLOAD_SUCCESS = PayloadAction&lt;{ src: string, sizeKb: number }&gt; 
  type UPLOAD_FAILURE = PayloadAction&lt;{ error: string }&gt;
  </code></pre>
  <p>And I'd like to convert it to a <code>createAsyncThunk</code> call, assuming it will reduce the code. But will it?</p>
  <p>From the example on <a href="https://redux-toolkit.js.org/api/createAsyncThunk" rel="noreferrer">https://redux-toolkit.js.org/api/createAsyncThunk</a> it should be something like:</p>
  <pre><code>const uploadThumbnail = createAsyncThunk(
    'mySlice/uploadThumbnail',
    async (file: File, thunkAPI) =&gt; {
      const response = await uploadAPI.upload(file) as API_RESPONSE
      return response.data   // IS THIS THE payload FOR THE fulfilled ACTION ?
    }
  )
  </code></pre>
  <p>This is how I would handle the life cycle actions?</p>
  <pre><code>const usersSlice = createSlice({
    name: 'mySlice',
    initialState: // SOME INITIAL STATE,
    reducers: {
      // standard reducer logic, with auto-generated action types per reducer
    },
    extraReducers: {
      // Add reducers for additional action types here, and handle loading state as needed
      [uploadThumbnail.pending]: (state,action) =&gt; {
         // HANDLE MY UPLOAD_START ACTION
      },
      [uploadThumbnail.fulfilled]: (state, action) =&gt; {
        // HANDLE MY UPLOAD_SUCCESS ACTION
      },
      [uploadThumbnail.rejected]: (state, action) =&gt; {
        // HANDLE MY UPLOAD_FAILURE ACTION
      },
    }
  })
  </code></pre>
  <p><strong>QUESTION</strong></p>
  <p>I'm assuming the return of the <code>createAsyncThunk</code> async handler is the <code>payload</code> for the <code>fulfilled</code> action, is that right?</p>
  <p>But how can I set the <code>payload</code> types for the <code>pending</code> and the <code>rejected</code> actions? Should I add a <code>try-catch</code> block to the <code>createAsyncThunk</code> handler?</p>
  <p>Is this the correlation I should be doing?</p>
  <ul>
  <li><code>pending === &quot;UPLOAD_START&quot;</code></li>
  <li><code>fulfilled === &quot;UPLOAD_SUCCESS&quot;</code></li>
  <li><code>rejected === &quot;UPLOAD_FAILURE&quot;</code></li>
  </ul>
  <p><strong>Obs:</strong> From the pattern I'm imagining, it doesn't look I'll be writing any less code than what I'm already doing with three separate actions and handling them in my regular reducers (instead of doing it on the <code>extraReducers</code> prop). What is the point of using the <code>createAsyncThunk</code> in this case?</p>