如何在 Typescript 中使用 createAsyncThunk？如何设置`pending`和`rejected`有效载荷的类型？

Question

现在我已经有了这些用于上传 thunk 生命周期的操作。

type UPLOAD_START   = PayloadAction<void>
type UPLOAD_SUCCESS = PayloadAction<{ src: string, sizeKb: number }> 
type UPLOAD_FAILURE = PayloadAction<{ error: string }>

我想将它转换为createAsyncThunk调用，假设它会减少代码。但是会吗？

从https://redux-toolkit.js.org/api/createAsyncThunk上的示例来看，它应该是这样的：

const uploadThumbnail = createAsyncThunk(
  'mySlice/uploadThumbnail',
  async (file: File, thunkAPI) => {
    const response = await uploadAPI.upload(file) as API_RESPONSE
    return response.data   // IS THIS THE payload FOR THE fulfilled ACTION ?
  }
)

这是我将如何处理生命周期操作？

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) => {
       // HANDLE MY UPLOAD_START ACTION
    },
    [uploadThumbnail.fulfilled]: (state, action) => {
      // HANDLE MY UPLOAD_SUCCESS ACTION
    },
    [uploadThumbnail.rejected]: (state, action) => {
      // HANDLE MY UPLOAD_FAILURE ACTION
    },
  }
})

题

我假设createAsyncThunk异步处理程序的返回是payload用于fulfilled操作，对吗？

但是如何设置和动作的payload类型？我应该向处理程序添加一个块吗？pendingrejectedtry-catchcreateAsyncThunk

这是我应该做的相关性吗？

• pending === "UPLOAD_START"
• fulfilled === "UPLOAD_SUCCESS"
• rejected === "UPLOAD_FAILURE"

Obs：从我想象的模式来看，看起来我编写的代码不会比我已经用三个单独的动作做的更少，并在我的常规减速器中处理它们（而不是在extraReducers道具上做） . createAsyncThunk在这种情况下使用 有什么意义？

Answer 1

通过查看您链接的文档页面中稍远一点的 TypeScript 示例之一，您的大多数问题都将得到解答：

export const updateUser = createAsyncThunk<
  User,
  { id: string } & Partial<User>,
  {
    rejectValue: ValidationErrors
  }
>('users/update', async (userData, { rejectWithValue }) => {
  try {
    const { id, ...fields } = userData
    const response = await userAPI.updateById<UpdateUserResponse>(id, fields)
    return response.data.user
  } catch (err) {
    let error: AxiosError<ValidationErrors> = err // cast the error for access
    if (!error.response) {
      throw err
    }
    // We got validation errors, let's return those so we can reference in our component and set form errors
    return rejectWithValue(error.response.data)
  }
})


const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
    builder.addCase(updateUser.fulfilled, (state, { payload }) => {
      state.entities[payload.id] = payload
    })
    builder.addCase(updateUser.rejected, (state, action) => {
      if (action.payload) {
        // Being that we passed in ValidationErrors to rejectType in `createAsyncThunk`, the payload will be available here.
        state.error = action.payload.errorMessage
      } else {
        state.error = action.error.message
      }
    })
  },
})

所以，从那里观察：

• 使用 TypeScript 时，您应该使用builderextraReducers的样式表示法，并且您的所有类型都将自动为您推断。您不应该需要extraReducers手动输入任何内容- 永远。
• return您的 thunk的ed 值将是payload“已完成”操作的值
• 如果你return rejectWithResult(value)，那将成为payload“被拒绝”的行动
• 如果你只是throw，那将成为error“被拒绝”的行动。

补充回答：

• “待定”是您的“UPLOAD_START”。它没有有效载荷，您无法设置它。“待定”/“拒绝”/“已完成”这三个都将具有action.meta.arg，这是您传递给 thunk 调用的原始值。
• 最后，这可能比您手动编写的代码少一点，并且在您的整个应用程序中将非常一致。此外，它还捕获了一些原本不会被发现的错误。你知道吗

export const updateUser = createAsyncThunk<
  User,
  { id: string } & Partial<User>,
  {
    rejectValue: ValidationErrors
  }
>('users/update', async (userData, { rejectWithValue }) => {
  try {
    const { id, ...fields } = userData
    const response = await userAPI.updateById<UpdateUserResponse>(id, fields)
    return response.data.user
  } catch (err) {
    let error: AxiosError<ValidationErrors> = err // cast the error for access
    if (!error.response) {
      throw err
    }
    // We got validation errors, let's return those so we can reference in our component and set form errors
    return rejectWithValue(error.response.data)
  }
})


const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
    builder.addCase(updateUser.fulfilled, (state, { payload }) => {
      state.entities[payload.id] = payload
    })
    builder.addCase(updateUser.rejected, (state, action) => {
      if (action.payload) {
        // Being that we passed in ValidationErrors to rejectType in `createAsyncThunk`, the payload will be available here.
        state.error = action.payload.errorMessage
      } else {
        state.error = action.error.message
      }
    })
  },
})

实际上包含一个错误？如果successAction触发重新渲染（它最有可能发生）并且在重新渲染期间的某个地方，错误为thrown，则该错误将在此try..catch块中被捕获，并且errorAction将调度另一个错误。因此，您将同时拥有成功和错误情况的 thunk。尴尬的。这可以通过将结果存储在一个作用域范围内的变量中并在 try-catch-block 之外分派来规避，但实际上谁这样做呢？;)createAsyncThunk在我看来，正是这些为您照顾的小事才值得。