为何出现‘.then is not function’错误？Redux异步调用问题求助

开发者阿泽

2026-5-21

问题分析与解决方案

这个错误.then is not a function的核心原因是你对redux action的调用顺序搞反了，而且很可能你的getUnaddedCartItems action creator没有正确返回可链式调用的Promise对象。

先看你的代码问题所在

你现在的写法是：

this.props.dispatch(getUnaddedCartItems().then((result) => { ... }))

这里你先调用了getUnaddedCartItems()，然后直接在它的返回值上调用.then，再把整个表达式传给dispatch。但如果getUnaddedCartItems是一个标准的redux action creator，它返回的是一个普通的action对象（plain object），根本没有.then方法——这就是报错的直接原因。

另外，你说断点命中action第一行但直接跳出，大概率是因为你的action creator没有处理异步逻辑的能力（比如没用到redux-thunk中间件），导致异步代码无法正常执行。

分步解决

1. 修正dispatch与.then的调用顺序

正确的做法是先dispatch这个action，再对dispatch的返回值（当action是异步时会是Promise）调用.then：

cartRedirect = () => { 
  this.props.dispatch(getUnaddedCartItems())
    .then((result) => { 
      if (result.length === 0) { 
        this.setState({unaddedCartItems: result}); 
      } 
    })
    .catch(err => { 
      Actions.cart(); 
    }); 
}

2. 确保`getUnaddedCartItems`是支持异步的action creator

要让action能处理异步逻辑（比如请求后端接口），你需要使用redux-thunk中间件，让action creator返回一个函数而不是普通对象。示例实现如下：

// 假设这是你的action creator文件
export const getUnaddedCartItems = () => {
  // 返回一个接收dispatch的函数（thunk的标准写法）
  return async (dispatch) => {
    try {
      // 这里替换成你的实际异步逻辑，比如API请求
      const response = await fetch('/api/get-unadded-cart-items');
      const result = await response.json();
      
      // 分发同步action更新redux状态（可选，根据你的需求）
      dispatch({
        type: 'GET_UNADDED_CART_ITEMS_SUCCESS',
        payload: result
      });
      
      // 返回结果，让外部的.then能拿到这个值
      return result;
    } catch (err) {
      // 分发错误action（可选）
      dispatch({
        type: 'GET_UNADDED_CART_ITEMS_FAILURE',
        payload: err
      });
      
      // 抛出错误，让外部的catch能捕获
      throw err;
    }
  };
}

3. 确认redux store已配置thunk中间件

如果还没配置，你需要在创建store的时候加入thunk：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './path-to-your-root-reducer';

const store = createStore(
  rootReducer,
  // 加入thunk中间件
  applyMiddleware(thunk)
);

为什么之前的断点会直接跳出？

如果你的action creator没有用thunk，直接在里面写异步代码（比如fetch），redux会因为无法识别函数类型的action而直接终止执行，导致你看到的“断点命中第一行后直接跳出”的情况。配置thunk后，redux会正确执行这个异步函数，你的代码就能按预期走到后续逻辑了。

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

为何出现‘.then is not function’错误？Redux异步调用问题求助

先看你的代码问题所在 #

分步解决 #