Next.js使用createAsyncThunk时Redux出现rejected Promise如何解决

你遇到的thunk rejected但UI正常展示的问题，核心是代码里的2个显性错误+1个逻辑隐患：

• 第一处致命错误：createAsyncThunk内的fetch调用未接收返回值
  你写的await fetch(...)只等待了请求发送完成，但没有把返回的Response实例赋值给response变量，下一行直接执行await response.json()时会抛出ReferenceError: response is not defined，这就是thunk进入rejected状态的直接原因。
• 第二处笔误：表单提交逻辑中dispatch拼写错误
  你写的dispath(addPlayer(formData))属于拼写错误，这行如果在运行时生效会直接抛函数未定义异常，大概率是贴代码时的笔误。
• 逻辑隐患：就算修复response赋值问题，你当前thunk直接return本地formData，没有使用接口返回的、带服务端生成ID/创建时间的真实player数据，后续会出现数据ID不匹配、更新/删除操作异常的问题。

关于「rejected但UI正常展示」的原因：await fetch()执行阶段已经把POST请求完整发送到后端，后端实际已经成功创建了player数据；你看到UI展示正常，是因为开发环境热更新、页面失焦重拉、或者其他隐式的数据同步逻辑拉到了后端的最新数据，并不是Redux状态更新生效导致的——你当前的addPlayer.fulfilled回调根本没有执行，属于异常状态，线上环境会出现创建无提示、数据不同步的问题。

1. 修正createAsyncThunk逻辑 #

补全response赋值，增加请求状态校验，返回接口真实生成的player数据：

export const addPlayer = createAsyncThunk(
  'players/addPlayer',
  async (formData) => {
    // 接收fetch返回的Response实例
    const response = await fetch('/api/players', {
      headers,
      method: 'POST',
      body: JSON.stringify(formData),
    });
    // 校验请求状态，接口返回4xx/5xx时主动抛错，避免错误进入fulfilled流程
    if (!response.ok) {
      throw new Error('玩家创建失败');
    }
    // 读取接口返回的真实新玩家数据
    const newPlayer = await response.json();
    return newPlayer;
  }
);

注意：请确认你定义的headers对象中包含'Content-Type': 'application/json'，否则后端无法正确解析JSON格式的请求体。

2. 修正extraReducers（原有逻辑无需改动，确认即可） #

.addCase(addPlayer.fulfilled, (state, action) => {
  adapter.addOne(state, action.payload);
})

3. 修正表单提交逻辑 #

修复dispatch拼写，增加错误捕获逻辑，避免静默失败：

const handleSubmitData = async (event) => {
  event.preventDefault();
  if (!formData) {
    alert('请填写完整表单');
    return;
  }
  try {
    // 修正dispatch拼写，用unwrap()捕获thunk内部的异步错误
    await dispatch(addPlayer(formData)).unwrap();
    // 提交成功后可追加清空表单、提示成功等逻辑
  } catch (err) {
    // 统一处理错误，给用户展示提示
    console.error('创建失败:', err);
  }
};

4. API路由逻辑（原有代码无问题，确认即可） #

case 'POST': {
  const player = await controller.create(req.body);
  return res.status(201).json(player);
}

修复后重新发起创建请求，Redux DevTool中会正常触发addPlayer/pending、addPlayer/fulfilled两个action，不会再出现rejected报错；store中会正确存入接口返回的新player数据，UI展示完全由Redux状态驱动，不再依赖隐式的数据刷新。

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