React Redux-Thunk异步任务始终处于Pending状态无法完成

你在模拟慢速API时犯了一个关键错误：没有调用Promise的resolve函数来完成异步操作，导致AsyncThunk一直卡在Pending状态。

错误原因分析 #

在cargar这个AsyncThunk的异步逻辑里，你写了：

await new Promise((resolve) => {
  setTimeout(() => respuesta = resolve, 2000);
});

这里只是把resolve函数本身赋值给了respuesta变量，并没有执行resolve()来触发Promise的完成。Promise只有在调用resolve或reject后才会退出Pending状态，所以你的AsyncThunk永远无法进入fulfilled阶段。

修正后的代码 #

app.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import './App.css';

const cargar = createAsyncThunk(
  "cargar/data",
  async () => {
    // 正确调用resolve完成Promise，可同时传递返回数据
    await new Promise((resolve) => {
      setTimeout(() => resolve('加载完成'), 2000);
    });
    return '加载完成';
    // 也可以简化写法：直接返回Promise
    // return new Promise(resolve => setTimeout(() => resolve('加载完成'), 2000))
  }
)

const cargaSlice = createSlice({
  name: "cargar",
  initialState: {
    isLoading: false,
    loaded: false,
    hasError: false
  },
  extraReducers: (builder) => {
    builder.addCase(cargar.pending, (state, action) => {
      state.isLoading = true;
      state.loaded = false;
      state.hasError = false;
    })
      .addCase(cargar.fulfilled, (state, action) => {
        state.isLoading = false;
        // 接收AsyncThunk返回的payload
        state.loaded = action.payload;
        state.hasError = false;
      })
      .addCase(cargar.rejected, (state, action) => {
        state.isLoading = false;
        state.loaded = false;
        state.hasError = true;
      })
  }
})

export default cargaSlice.reducer;

export function App() {
  const dispatch = useDispatch();
  const handleCarga = () => {
    dispatch(cargar());
  }
  return (
      <div className="App">
        <h1>Presiona el botón para cargar</h1>
        <button onClick={handleCarga}>Cargar</button>
      </div>
  );
}

index.js（补充说明）

当前index.js的reducer导入写法是正确的，因为App.js的默认导出是cargaSlice.reducer。不过为了代码可读性，建议把reducer单独拆分到独立文件（比如cargaSlice.js），避免和组件代码混写。

验证效果 #

修正后，点击按钮后通过Redux DevTools可以看到：

1. 立即触发cargar/data/pending action，isLoading变为true
2. 2秒后触发cargar/data/fulfilled action，isLoading变为false，loaded被设置为返回的payload

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