createAsyncThunk运行时取消失效 dispatch返回undefined无法abort

核心原因 #

你调用方法拿到undefined，本质是dispatch的返回值被中途吞掉了，没有透传到调用方。dispatch(createAsyncThunk返回的action)本身一定会返回带abort()方法的Promise实例，拿不到值只有一种可能：你定义的getDataAction方法没有把dispatch的执行结果return出来。
另外就算拿到了Promise实例，如果没有在thunk回调里绑定中止信号，也只会让前端Promise状态变为已中止，真实的网络请求不会被取消，依然会发出去占用带宽。

修复方案 #

1. 保证dispatch返回值透传 #

优先推荐用useDispatch Hook写法，比connect的mapDispatchToProps写法更不容易出现返回值丢失的问题：

const [counter, setCounter] = React.useState(0);
const dispatch = useDispatch();
const handleClick = () => {
  // 用函数式更新避免闭包导致的计数错误
  setCounter(prev => prev + 1);
};

React.useEffect(() => {
  // 直接接收dispatch返回的带abort方法的Promise
  const asyncTask = dispatch(getData());
  return () => {
    // 依赖变化/组件卸载时中止请求
    asyncTask.abort();
  };
}, [counter, dispatch]);
    
return (
  <div className={styles.home_container}>
    <div className={styles.btn} onClick={handleClick}>
      Click
    </div>
  </div>
);

如果你要保留connect+mapDispatchToProps的写法，必须显式return dispatch的执行结果，不要漏写return：

const mapDispatchToProps = (dispatch) => {
  return {
    getDataAction: () => {
      // 这里必须加return，否则方法默认返回undefined
      return dispatch(getData());
    }
  };
};

2. 在thunk逻辑中绑定中止信号 #

要让abort真正取消网络请求，需要在createAsyncThunk的回调里接收signal参数，传给你的请求方法：

• fetch 原生支持signal参数：

const getData = createAsyncThunk('data/get', async (_, { signal }) => {
  const res = await fetch('/api/your-data-path', { signal });
  return res.json();
});

• axios 可在请求配置中传入signal：

const getData = createAsyncThunk('data/get', async (_, { signal }) => {
  const res = await axios.get('/api/your-data-path', { signal });
  return res.data;
});

额外注意事项 #

• 不要把mapDispatchToProps里手动定义的方法加到useEffect依赖数组中，这类方法每次渲染都会生成新引用，会导致effect无意义重复触发，用useDispatch返回的dispatch方法引用是稳定的，不存在这个问题。
• 不要在setState时直接依赖外部的state变量（比如你原来写的setCounter(counter + 1)），连续触发更新时会因为闭包拿到旧值导致计数错误，统一用函数式更新写法。

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