createAsyncThunk

概述

一个接受 Redux action type 字符串和一个返回 promise 的回调函数作为参数的函数。它基于你传入的 action type 前缀生成 promise 生命周期的 action types,并返回一个 thunk action creator,这个 action creator 会运行 promise 回调并根据返回的 promise 派发生命周期 actions。

这抽象了处理异步请求生命周期的标准推荐方法。

它不会生成任何 reducer 函数,因为它并不知道你要获取什么数据、如何跟踪加载状态,或者如何处理返回的数据。你应该编写自己的 reducer 逻辑来处理这些 actions,使用适合你自己应用的加载状态和处理逻辑。

提示

Redux Toolkit 的 RTK Query 数据获取 API 是一个专门为 Redux 应用打造的数据获取和缓存解决方案,可以消除编写任何 thunk 或 reducer 来管理数据获取的需求。我们鼓励你尝试使用它,看看它是否可以帮助简化你应用中的数据获取代码!

示例用法:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// 首先,创建 thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  },
)

interface UsersState {
  entities: User[]
  loading: 'idle' | 'pending' | 'succeeded' | 'failed'
}

const initialState = {
  entities: [],
  loading: 'idle',
} satisfies UserState as UsersState

// 然后,在 reducer 中处理 actions:
const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    // 标准 reducer 逻辑,每个 reducer 自动生成 action types
  },
  extraReducers: (builder) => {
    // 在这里添加额外的 action types 的 reducers,并根据需要处理加载状态
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // 将用户添加到 state 数组中
      state.entities.push(action.payload)
    })
  },
})

// 后续,在应用中根据需要派发 thunk
dispatch(fetchUserById(123))

参数

createAsyncThunk 接受三个参数:一个字符串 action type 值,一个 payloadCreator 回调,和一个 options 对象。

type

一个字符串,用于生成表示异步请求生命周期的额外 Redux action type 常量:

例如,一个 type 参数为 'users/requestStatus' 将生成这些 action types:

• pending: 'users/requestStatus/pending'
• fulfilled: 'users/requestStatus/fulfilled'
• rejected: 'users/requestStatus/rejected'

payloadCreator

一个回调函数,应该返回一个包含一些异步逻辑结果的 promise。它也可以同步返回一个值。如果有错误,它应该返回一个包含 Error 实例或描述性错误消息的被拒绝的 promise,或者返回一个带有 RejectWithValue 参数的已解决的 promise,该参数由 thunkAPI.rejectWithValue 函数返回。

payloadCreator 函数可以包含任何你需要的逻辑来计算适当的结果。这可能包括标准的 AJAX 数据获取请求、多个 AJAX 调用并将结果合并为最终值、与 React Native AsyncStorage 的交互等。

payloadCreator 函数将被调用并传入两个参数:

• arg: 一个单一值,包含派发 thunk action creator 时传入的第一个参数。这对于传入诸如项目 ID 之类的值非常有用,这些值可能是请求的一部分。如果你需要传入多个值,在派发 thunk 时将它们一起传入一个对象,例如 dispatch(fetchUsers({status: 'active', sortBy: 'name'}))。
• thunkAPI: 一个包含所有通常传递给 Redux thunk 函数的参数的对象,以及额外的选项:
  • dispatch: Redux store 的 dispatch 方法
  • getState: Redux store 的 getState 方法
  • extra: 在设置 thunk 中间件时传递给它的 "额外参数",如果有的话
  • requestId: 一个唯一的字符串 ID 值,自动生成以标识此请求序列
  • signal: 一个 AbortController.signal 对象,可用于查看应用逻辑的其他部分是否已标记此请求需要取消。
  • rejectWithValue(value, [meta]): rejectWithValue 是一个实用函数,你可以在 action creator 中 return (或 throw) 以返回一个带有定义的 payload 和 meta 的被拒绝响应。它会传递你给它的任何值,并在被拒绝的 action 的 payload 中返回它。如果你还传入了 meta,它将与现有的 rejectedAction.meta 合并。
  • fulfillWithValue(value, meta): fulfillWithValue 是一个实用函数,你可以在 action creator 中 return 以 fulfill 一个值,同时能够添加到 fulfilledAction.meta。

payloadCreator 函数中的逻辑可以根据需要使用这些值来计算结果。

选项

一个包含以下可选字段的对象:

• condition(arg, { getState, extra } ): boolean | Promise<boolean>: 一个回调,可以用于跳过 payload creator 的执行和所有 action 派发,如果需要的话。请参阅 取消执行前 以获取完整描述。
• dispatchConditionRejection: 如果 condition() 返回 false,默认行为是不会派发任何 actions。如果你仍然希望在 thunk 被取消时派发一个 "rejected" action,请将此标志设置为 true。
• idGenerator(arg): string: 一个用于生成请求序列的 requestId 的函数。默认使用 nanoid,但你可以实现自己的 ID 生成逻辑。
• serializeError(error: unknown) => any 用于替换内部的 miniSerializeError 方法,使用你自己的序列化逻辑。
• getPendingMeta({ arg, requestId }, { getState, extra }): any: 一个函数,用于创建一个对象,该对象将合并到 pendingAction.meta 字段中。

返回值

createAsyncThunk 返回一个标准的 Redux thunk action creator。thunk action creator 函数将有 pending、fulfilled 和 rejected 情况的普通 action creators 作为嵌套字段。

使用上面的 fetchUserById 示例,createAsyncThunk 将生成四个函数:

• fetchUserById,启动你编写的异步 payload 回调的 thunk action creator
  • fetchUserById.pending,一个派发 'users/fetchByIdStatus/pending' action 的 action creator
  • fetchUserById.fulfilled,一个派发 'users/fetchByIdStatus/fulfilled' action 的 action creator
  • fetchUserById.rejected,一个派发 'users/fetchByIdStatus/rejected' action 的 action creator

当派发时,thunk 将:

• 派发 pending action
• 调用 payloadCreator 回调并等待返回的 promise 完成
• 当 promise 完成时:
  • 如果 promise 成功解决,派发 fulfilled action 并将 promise 值作为 action.payload
  • 如果 promise 以 rejectWithValue(value) 返回值解决,派发 rejected action 并将传入的值作为 action.payload 和 'Rejected' 作为 action.error.message
  • 如果 promise 失败且未使用 rejectWithValue 处理,派发 rejected action 并将错误值的序列化版本作为 action.error
• 返回一个包含最终派发的 action (无论是 fulfilled 还是 rejected action 对象) 的已解决 promise

Thunk 派发选项

返回的 thunk action creator 接受一个可选的第二个参数,包含以下选项:

• signal: 一个可选的 AbortSignal,将由内部中止信号跟踪 (请参阅 取消运行时)

const externalController = new AbortController()
dispatch(fetchUserById(123, { signal: externalController.signal }))
externalController.abort()

Promise 生命周期 actions

createAsyncThunk 将使用 createAction 生成三个 Redux action creators: pending、fulfilled 和 rejected。每个生命周期 action creator 将附加到返回的 thunk action creator,以便你的 reducer 逻辑可以引用 action types 并在派发时响应这些 actions。每个 action 对象将在 action.meta 下包含当前唯一的 requestId 和 arg 值。

action creators 将具有以下签名:

interface SerializedError {
  name?: string
  message?: string
  code?: string
  stack?: string
}

interface PendingAction<ThunkArg> {
  type: string
  payload: undefined
  meta: {
    requestId: string
    arg: ThunkArg
  }
}

interface FulfilledAction<ThunkArg, PromiseResult> {
  type: string
  payload: PromiseResult
  meta: {
    requestId: string
    arg: ThunkArg
  }
}

interface RejectedAction<ThunkArg> {
  type: string
  payload: undefined
  error: SerializedError | any
  meta: {
    requestId: string
    arg: ThunkArg
    aborted: boolean
    condition: boolean
  }
}

interface RejectedWithValueAction<ThunkArg, RejectedValue> {
  type: string
  payload: RejectedValue
  error: { message: 'Rejected' }
  meta: {
    requestId: string
    arg: ThunkArg
    aborted: boolean
  }
}

type Pending = <ThunkArg>(
  requestId: string,
  arg: ThunkArg,
) => PendingAction<ThunkArg>

type Fulfilled = <ThunkArg, PromiseResult>(
  payload: PromiseResult,
  requestId: string,
  arg: ThunkArg,
) => FulfilledAction<ThunkArg, PromiseResult>

type Rejected = <ThunkArg>(
  requestId: string,
  arg: ThunkArg,
) => RejectedAction<ThunkArg>

type RejectedWithValue = <ThunkArg, RejectedValue>(
  requestId: string,
  arg: ThunkArg,
) => RejectedWithValueAction<ThunkArg, RejectedValue>

要在 reducer 中处理这些 actions,请在 createReducer 或 createSlice 中使用 "builder 回调" 语法引用 action creators。

const reducer1 = createReducer(initialState, (builder) => {
  builder.addCase(fetchUserById.fulfilled, (state, action) => {})
})

const reducer2 = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.fulfilled, (state, action) => {})
  },
})

此外,还附加了一个 settled matcher,用于匹配 fulfilled 和 rejected actions。概念上类似于 finally 块。

确保使用 addMatcher 而不是 addCase,因为 settled 是一个 matcher 而不是 action creator。

const reducer1 = createReducer(initialState, (builder) => {
  builder.addMatcher(fetchUserById.settled, (state, action) => {})
})

const reducer2 = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(fetchUserById.settled, (state, action) => {})
  },
})

处理 Thunk 结果

解包结果 actions

Thunks 派发时可能返回一个值。一个常见的用例是从组件派发 thunk,返回一个 promise,然后等待 promise 解决后再进行额外的工作:

const onClick = () => {
  dispatch(fetchUserById(userId)).then(() => {
    // 进行额外的工作
  })
}

createAsyncThunk 生成的 thunks 将始终返回一个已解决的 promise,其中包含 fulfilled action 对象或 rejected action 对象,视情况而定。

调用逻辑可能希望将这些 actions 视为原始 promise 内容。派发的 thunk 返回的 promise 具有一个 unwrap 属性,可以调用它来提取 fulfilled action 的 payload,或从 rejected action 中抛出 error 或,如果可用,由 rejectWithValue 创建的 payload:

// 在组件中

const onClick = () => {
  dispatch(fetchUserById(userId))
    .unwrap()
    .then((originalPromiseResult) => {
      // 在这里处理结果
    })
    .catch((rejectedValueOrSerializedError) => {
      // 在这里处理错误
    })
}

或者使用 async/await 语法:

// 在组件中

const onClick = async () => {
  try {
    const originalPromiseResult = await dispatch(fetchUserById(userId)).unwrap()
    // 在这里处理结果
  } catch (rejectedValueOrSerializedError) {
    // 在这里处理错误
  }
}

使用附加的 .unwrap() 属性在大多数情况下是首选,然而 Redux Toolkit 也导出了一个 unwrapResult 函数,可以用于类似的目的:

import { unwrapResult } from '@reduxjs/toolkit'

// 在组件中
const onClick = () => {
  dispatch(fetchUserById(userId))
    .then(unwrapResult)
    .then((originalPromiseResult) => {
      // 在这里处理结果
    })
    .catch((rejectedValueOrSerializedError) => {
      // 在这里处理结果
    })
}

或者使用 async/await 语法:

import { unwrapResult } from '@reduxjs/toolkit'

// 在组件中
const onClick = async () => {
  try {
    const resultAction = await dispatch(fetchUserById(userId))
    const originalPromiseResult = unwrapResult(resultAction)
    // 在这里处理结果
  } catch (rejectedValueOrSerializedError) {
    // 在这里处理错误
  }
}

派发后检查错误

请注意,这意味着 失败的请求或 thunk 中的错误将 永远 不会返回 被拒绝的 promise。我们假设此时任何失败都更像是处理过的错误而不是未处理的异常。这是因为我们希望防止那些不使用 dispatch 结果的人遇到未捕获的 promise 拒绝。

如果你的组件需要知道请求是否失败,请使用 .unwrap 或 unwrapResult 并相应地处理重新抛出的错误。

处理 Thunk 错误

当你的 payloadCreator 返回一个被拒绝的 promise (例如在 async 函数中抛出错误),thunk 将派发一个包含自动序列化版本错误的 rejected action 作为 action.error。然而,为了确保可序列化,任何不符合 SerializedError 接口的内容都将被移除:

export interface SerializedError {
  name?: string
  message?: string
  stack?: string
  code?: string
}

如果你需要自定义 rejected action 的内容,你应该自己捕获任何错误,然后使用 thunkAPI.rejectWithValue 实用工具返回一个新值。执行 return rejectWithValue(errorPayload) 将导致 rejected action 使用该值作为 action.payload。

如果你的 API 响应 "成功",但包含一些额外的错误详细信息,则应使用 rejectWithValue 方法,以便 reducer 知道这些信息。这在期望从 API 获取字段级验证错误时特别常见。

const updateUser = createAsyncThunk(
  'users/update',
  async (userData, { rejectWithValue }) => {
    const { id, ...fields } = userData
    try {
      const response = await userAPI.updateById(id, fields)
      return response.data.user
    } catch (err) {
      // 使用 `err.response.data` 作为 `rejected` action 的 `action.payload`,
      // 通过显式返回它使用 `rejectWithValue()` 实用工具
      return rejectWithValue(err.response.data)
    }
  },
)

取消

取消执行前

如果你需要在 payload creator 被调用之前取消 thunk,可以在回调之后提供一个 condition 回调作为选项。回调将接收 thunk 参数和一个包含 {getState, extra} 的对象作为参数,并使用这些参数来决定是否继续。如果执行应该取消,condition 回调应返回一个字面 false 值或一个应解析为 false 的 promise。如果返回 promise,thunk 将等待它完成后再派发 pending action,否则将同步派发。

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  },
  {
    condition: (userId, { getState, extra }) => {
      const { users } = getState()
      const fetchStatus = users.requests[userId]
      if (fetchStatus === 'fulfilled' || fetchStatus === 'loading') {
        // 已经获取或正在进行,不需要重新获取
        return false
      }
    },
  },
)

如果 condition() 返回 false,默认行为是不会派发任何 actions。如果你仍然希望在 thunk 被取消时派发一个 "rejected" action,请传入 {condition, dispatchConditionRejection: true}。

取消运行时

如果你想在 thunk 完成之前取消正在运行的 thunk,可以使用 dispatch(fetchUserById(userId)) 返回的 promise 的 abort 方法。

一个真实的示例如下:

// 文件: store.ts noEmit
import { configureStore } from '@reduxjs/toolkit'
import type { Reducer } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'

declare const reducer: Reducer<{}>
const store = configureStore({ reducer })
export const useAppDispatch = () => useDispatch<typeof store.dispatch>()

// 文件: slice.ts noEmit
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUserById = createAsyncThunk(
  'fetchUserById',
  (userId: string) => {
    /* ... */
  },
)

// 文件: MyComponent.ts
import { fetchUserById } from './slice'
import { useAppDispatch } from './store'
import React from 'react'

function MyComponent(props: { userId: string }) {
  const dispatch = useAppDispatch()
  React.useEffect(() => {
    // 派发 thunk 返回一个 promise
    const promise = dispatch(fetchUserById(props.userId))
    return () => {
      // `createAsyncThunk` 将 `abort()` 方法附加到 promise
      promise.abort()
    }
  }, [props.userId])
}

在这种方式取消 thunk 后,它将派发 (并返回) 一个带有 AbortError 的 "thunkName/rejected" action 在 error 属性上。thunk 将不再派发任何进一步的 actions。

此外,你的 payloadCreator 可以使用通过 thunkAPI.signal 传递的 AbortSignal 实际取消昂贵的异步操作。

现代浏览器的 fetch API 已经支持 AbortSignal:

import { createAsyncThunk } from '@reduxjs/toolkit'

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId: string, thunkAPI) => {
    const response = await fetch(`https://reqres.in/api/users/${userId}`, {
      signal: thunkAPI.signal,
    })
    return await response.json()
  },
)

检查取消状态

读取信号值

你可以使用 signal.aborted 属性定期检查 thunk 是否已中止,并在这种情况下停止昂贵的长时间运行的工作:

import { createAsyncThunk } from '@reduxjs/toolkit'

const readStream = createAsyncThunk(
  'readStream',
  async (stream: ReadableStream, { signal }) => {
    const reader = stream.getReader()

    let done = false
    let result = ''

    while (!done) {
      if (signal.aborted) {
        throw new Error('停止工作,这已被中止!')
      }
      const read = await reader.read()
      result += read.value
      done = read.done
    }
    return result
  },
)

监听中止事件

你还可以调用 signal.addEventListener('abort', callback) 以便在 thunk 中的逻辑在调用 promise.abort() 时收到通知。 例如,这可以与 axios 的 CancelToken 一起使用:

import { createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId: string, { signal }) => {
    const source = axios.CancelToken.source()
    signal.addEventListener('abort', () => {
      source.cancel()
    })
    const response = await axios.get(`https://reqres.in/api/users/${userId}`, {
      cancelToken: source.token,
    })
    return response.data
  },
)

检查 Promise 拒绝是否来自错误或取消

要调查 thunk 取消的行为,可以检查派发的 action 的 meta 对象上的各种属性。 如果 thunk 被取消,则 promise 的结果将是一个 rejected action (无论该 action 是否实际派发到 store)。

• 如果在执行前被取消,meta.condition 将为 true。
• 如果在运行时被中止,meta.aborted 将为 true。
• 如果这些都不为 true,则 thunk 未被取消,只是被拒绝,无论是由于 Promise 拒绝还是 rejectWithValue。
• 如果 thunk 未被拒绝,则 meta.aborted 和 meta.condition 都将为 undefined。

因此,如果你想测试 thunk 在执行前被取消,可以执行以下操作:

import { createAsyncThunk } from '@reduxjs/toolkit'

test('这个 thunk 应该始终被跳过', async () => {
  const thunk = createAsyncThunk(
    'users/fetchById',
    async () => throw new Error('这个 promise 不应该被进入'),
    {
      condition: () => false,
    }
  )
  const result = await thunk()(dispatch, getState, null)

  expect(result.meta.condition).toBe(true)
  expect(result.meta.aborted).toBe(false)
})

示例

• 根据 ID 请求用户,带有加载状态,并且一次只能请求一个:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI, User } from './userAPI'

const fetchUserById = createAsyncThunk<
  User,
  string,
  {
    state: { users: { loading: string; currentRequestId: string } }
  }
>('users/fetchByIdStatus', async (userId: string, { getState, requestId }) => {
  const { currentRequestId, loading } = getState().users
  if (loading !== 'pending' || requestId !== currentRequestId) {
    return
  }
  const response = await userAPI.fetchById(userId)
  return response.data
})

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    entities: [],
    loading: 'idle',
    currentRequestId: undefined,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state, action) => {
        if (state.loading === 'idle') {
          state.loading = 'pending'
          state.currentRequestId = action.meta.requestId
        }
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        const { requestId } = action.meta
        if (
          state.loading === 'pending' &&
          state.currentRequestId === requestId
        ) {
          state.loading = 'idle'
          state.entities.push(action.payload)
          state.currentRequestId = undefined
        }
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        const { requestId } = action.meta
        if (
          state.loading === 'pending' &&
          state.currentRequestId === requestId
        ) {
          state.loading = 'idle'
          state.error = action.error
          state.currentRequestId = undefined
        }
      })
  },
})

const UsersComponent = () => {
  const { entities, loading, error } = useSelector((state) => state.users)
  const dispatch = useDispatch()

  const fetchOneUser = async (userId) => {
    try {
      const user = await dispatch(fetchUserById(userId)).unwrap()
      showToast('success', `Fetched ${user.name}`)
    } catch (err) {
      showToast('error', `Fetch failed: ${err.message}`)
    }
  }

  // 渲染 UI
}

• 使用 rejectWithValue 在组件中访问自定义被拒绝的 payload

  注意:这是一个假设我们的 userAPI 只会抛出特定验证错误的例子

// 文件: store.ts noEmit
import { configureStore } from '@reduxjs/toolkit'
import type { Reducer } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import usersReducer from './user/slice'

const store = configureStore({ reducer: { users: usersReducer } })
export const useAppDispatch = () => useDispatch<typeof store.dispatch>()
export type RootState = ReturnType<typeof store.getState>

// 文件: user/userAPI.ts noEmit

export declare const userAPI: {
  updateById<Response>(id: string, fields: {}): { data: Response }
}

// 文件: user/slice.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'
import type { AxiosError } from 'axios'

// 示例类型将被使用
export interface User {
  id: string
  first_name: string
  last_name: string
  email: string
}

interface ValidationErrors {
  errorMessage: string
  field_errors: Record<string, string>
}

interface UpdateUserResponse {
  user: User
  success: boolean
}

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 // 强制转换错误以访问
    if (!error.response) {
      throw err
    }
    // 我们得到了验证错误,让我们返回这些错误,以便我们可以在组件中引用并设置表单错误
    return rejectWithValue(error.response.data)
  }
})

interface UsersState {
  error: string | null | undefined
  entities: Record<string, User>
}

const initialState = {
  entities: {},
  error: null,
} satisfies UsersState as UsersState

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // 使用 `builder` 回调形式,因为它提供了正确类型的 reducers 来自 action creators
    builder.addCase(updateUser.fulfilled, (state, { payload }) => {
      state.entities[payload.id] = payload
    })
    builder.addCase(updateUser.rejected, (state, action) => {
      if (action.payload) {
        // 由于我们在 `createAsyncThunk` 中传递了 ValidationErrors 到 rejectType,因此 payload 将在这里可用。
        state.error = action.payload.errorMessage
      } else {
        state.error = action.error.message
      }
    })
  },
})

export default usersSlice.reducer

// 文件: externalModules.d.ts noEmit

declare module 'some-toast-library' {
  export function showToast(type: string, message: string)
}

// 文件: user/UsersComponent.ts

import React from 'react'
import { useAppDispatch } from '../store'
import type { RootState } from '../store'
import { useSelector } from 'react-redux'
import { updateUser } from './slice'
import type { User } from './slice'
import type { FormikHelpers } from 'formik'
import { showToast } from 'some-toast-library'

interface FormValues extends Omit<User, 'id'> {}

const UsersComponent = (props: { id: string }) => {
  const { entities, error } = useSelector((state: RootState) => state.users)
  const dispatch = useAppDispatch()

  // 这是一个使用 Formik 的 onSubmit 处理程序示例,旨在演示访问被拒绝的 action 的 payload
  const handleUpdateUser = async (
    values: FormValues,
    formikHelpers: FormikHelpers<FormValues>,
  ) => {
    const resultAction = await dispatch(updateUser({ id: props.id, ...values }))
    if (updateUser.fulfilled.match(resultAction)) {
      // user 将具有 User 类型签名,因为我们在 createAsyncThunk 中传递了该参数作为 Returned
      const user = resultAction.payload
      showToast('success', `Updated ${user.first_name} ${user.last_name}`)
    } else {
      if (resultAction.payload) {
        // 由于我们在 `createAsyncThunk` 中传递了 ValidationErrors 到 rejectType,这些类型将在这里可用。
        formikHelpers.setErrors(resultAction.payload.field_errors)
      } else {
        showToast('error', `Update failed: ${resultAction.error}`)
      }
    }
  }

  // 渲染 UI
}