React类组件dispatch Redux异步action返回Promise结果为undefined排查

1. dispatch返回Promise结果为undefined的直接原因 #

你使用的redux-thunk中间件规定：dispatch调用异步action（thunk函数）时，返回值就是该thunk函数的执行结果。你当前的getEvents对应的async thunk函数没有主动返回任何值，async函数默认返回resolve(undefined)，因此你打印得到的Promise结果为undefined。

注意：Redux的设计逻辑中，store存储的状态和dispatch的返回值是完全独立的两个链路，store状态更新正常不代表dispatch返回值会自动携带状态数据。

2. 组件获取store数据的问题 #

你当前connect()(Calendar)没有传入mapStateToProps参数，没有将Redux store中存储的事件数据映射到组件的props上，即使DevTools能看到数据，组件也无法直接通过props拿到对应数据。

修复方案 #

步骤1：修改异步action，主动返回数据（如果需要从dispatch返回值拿数据） #

// action 修改后
export const getEvents = () => async (dispatch) => {
  try {
    dispatch({ type: GET_EVENTS_REQUEST })
    const data = await axios.get('http://localhost:5000/api/schedule').then((response) => response.data)
    dispatch({ type: GET_EVENTS_SUCCESS, payload: data })
    return data // 新增返回请求到的数据
  } catch (error) {
    const errMsg = error.response && error.response.data.message
        ? error.response.data.message
        : error.message
    dispatch({
      type: GET_EVENTS_FAIL,
      payload: errMsg,
    })
    throw error // 出错时抛出错误，让外层可以catch捕获异常
  }
}

修改后你再打印dispatch(getEvents())就能拿到对应的数据了。

步骤2：给connect添加mapStateToProps，让组件能拿到store中的数据 #

// 组件调用代码修改后
import { getEvents } from '../../redux/actions/calendarActions'

class Calendar extends React.PureComponent {
    componentDidMount() {
        const { dispatch } = this.props
        // 两种拿数据的方式二选一即可
        // 方式1：从dispatch返回的Promise拿
        dispatch(getEvents()).then(data => console.log('从dispatch返回值拿到的数据：', data))
        // 方式2：直接从props拿（映射后），后续状态更新也会自动同步到props
        console.log('从props拿到的store数据：', this.props.events)
    }
}

// 新增mapStateToProps，注意state后面的key要和你combineReducers时注册的key对应
const mapStateToProps = (state) => ({
  events: state.calendarEvents.event, // 示例key为calendarEvents，自行替换为你实际注册的key
  loading: state.calendarEvents.loading,
  error: state.calendarEvents.error
})

export default connect(mapStateToProps)(Calendar)

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