为什么需要Redux Async Thunk？createAsyncThunk能提供什么帮助？

你当前写的最简异步请求逻辑是完全可以正常运行的，如果你的场景不需要处理加载状态、异常捕获、重复请求拦截等逻辑，完全可以不用引入createAsyncThunk。但当业务复杂度上升后，createAsyncThunk能帮你规避大量重复样板代码，降低出错概率，核心优势如下：

• 自动生成请求全周期的Action类型
  你当前的代码只处理了请求成功的场景，如果需要新增加载状态展示、接口错误提示能力，你需要手动定义pending、rejected两种状态的Action，还要手动给请求包裹try/catch块。createAsyncThunk会自动生成对应请求的三种状态Action，你只需要在slice的extraReducers中监听对应状态即可完成逻辑编写，不用手动维护Action Creator和异常捕获逻辑，示例代码如下：

  import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
  import axios from 'axios'
  
  // 直接定义异步逻辑，thunk自动生成三种状态Action
  export const loadMyData = createAsyncThunk('mydata/load', async () => {
    const res = await axios.get('https://www.api.com/mydata')
    return res.data
  })
  
  const myDataSlice = createSlice({
    name: 'mydata',
    initialState: {
      data: null,
      loading: false,
      error: null
    },
    extraReducers: builder => {
      builder
        .addCase(loadMyData.pending, state => {
          state.loading = true
          state.error = null
        })
        .addCase(loadMyData.fulfilled, (state, action) => {
          state.loading = false
          state.data = action.payload
        })
        .addCase(loadMyData.rejected, (state, action) => {
          state.loading = false
          state.error = action.error.message
        })
    }
  })
  

• 原生支持请求取消能力，避免内存泄漏
  你当前手写的逻辑如果在请求返回前组件卸载，会出现回调调用已卸载组件方法的内存泄漏问题。createAsyncThunk内置了AbortController封装，你可以直接将thunkAPI提供的signal参数传入axios，即可实现组件卸载时自动取消请求，不用自己手动实例化AbortController维护取消逻辑。
• 统一异步逻辑写法，降低团队协作成本
  Redux Toolkit作为官方推荐的Redux开发工具，默认集成了thunk中间件与createAsyncThunk能力，不需要你额外安装配置redux-thunk。全团队统一使用createAsyncThunk编写异步逻辑，可以避免出现不同开发者手写异步请求风格不一致、异常处理逻辑遗漏的问题，代码可维护性更高。
• 便捷实现高阶请求控制逻辑
  如果你需要实现重复请求拦截、请求防抖/节流、请求状态全局追踪等能力，createAsyncThunk生成的异步函数自带状态匹配器，可以非常方便的判断当前请求是否处于pending状态，不需要你自己额外定义变量维护请求状态。

如果你的项目规模极小，异步请求数量非常少，且不需要处理加载、错误状态，完全可以继续使用你当前的手写逻辑，不需要强制引入createAsyncThunk增加复杂度。

内容的提问来源于stack exchange，提问作者Teamol