Redux Store获取undefined及异步Action返回undefined问题求助

看起来你遇到的问题核心是异步Action Creator的返回值处理不当，结合你描述的现象——makeRequest能拿到数据、dispatch前action数据完整，但Actions.getResults()返回undefined，我帮你梳理几个关键排查和修复点：

1. 确认Redux异步中间件（如redux-thunk）已正确配置 #

Redux本身不支持异步Action，必须借助中间件（最常用的是redux-thunk）来让Action Creator返回函数而非普通对象。如果没有配置中间件，你的异步Action逻辑根本不会被正确执行，还可能导致返回值异常。

检查你的Store配置代码，确保包含redux-thunk：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 必须添加这一行
);

2. 修正getResults Action Creator的返回逻辑 #

你的getResults大概率没有正确返回异步操作的Promise，导致调用它时得到undefined。正确的异步Action Creator应该返回一个接收dispatch的函数，并且在内部返回请求的Promise链。

举个正确的实现示例：

// actions/api.js
export const makeRequest = (url, method) => {
  // 确保makeRequest返回Promise（这里用fetch举例，axios同理）
  return fetch(url, { method })
    .then(res => res.json())
    .catch(err => {
      console.error('请求失败:', err);
      throw err; // 抛出错误让上层捕获
    });
};

// actions/index.js
export const getResults = () => {
  // 返回一个接收dispatch的函数（redux-thunk会处理这个函数）
  return (dispatch) => {
    // 务必return这个Promise链，这样调用getResults()时能拿到Promise
    return makeRequest('/your-api-endpoint', 'GET')
      .then(resData => {
        const responseAction = {
          type: 'GET_RESULTS_SUCCESS',
          data: resData
        };
        console.log(responseAction); // 这里能看到完整数据
        dispatch(responseAction);
        return resData; // 可选：让调用者能拿到返回的数据
      })
      .catch(err => {
        dispatch({
          type: 'GET_RESULTS_FAILURE',
          error: err
        });
        throw err; // 抛出错误，方便调用者处理
      });
  };
};

3. 正确调用getResults Action #

如果在组件中直接调用Actions.getResults()而不通过dispatch，也会导致返回值异常（因为redux-thunk处理的是被dispatch的函数）。正确的调用方式如下：

方式1：直接使用dispatch #

// 组件中
componentDidMount() {
  this.props.dispatch(Actions.getResults())
    .then(results => {
      // 这里可以拿到返回的数据
      console.log('获取到结果:', results);
    })
    .catch(err => {
      // 处理请求错误
      console.error('获取结果失败:', err);
    });
}

方式2：通过connect的mapDispatchToProps绑定 #

import { connect } from 'react-redux';
import { getResults } from './actions';

class YourComponent extends React.Component {
  componentDidMount() {
    this.props.getResults()
      .then(results => { /* 处理结果 */ })
      .catch(err => { /* 处理错误 */ });
  }
}

const mapDispatchToProps = {
  getResults // 自动绑定dispatch
};

export default connect(null, mapDispatchToProps)(YourComponent);

4. 验证makeRequest的返回值 #

最后再确认makeRequest函数确实返回了Promise——如果内部调用了fetch或axios，一定要确保用return返回请求的结果，否则makeRequest会返回undefined，导致后续的Promise链断裂，进而让getResults()返回undefined。

按照以上步骤排查后，Actions.getResults()应该会返回一个Promise，你可以通过.then()获取数据，同时reducer也能正确接收到带data的Action，解决Cannot read property 'data' of undefined的错误。

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