React Native Redux API请求异常：Action未执行、返回空数据求助

问题现象 #

调用GET类型API时Action未执行，Action与Reducer中的控制台日志均无输出；通过mapStateToProps查看DetailsReducer的状态始终为：

{
  details: {},
  isFetching: false,
  error: false
}

始终返回空数据。

相关代码 #

Action 文件 #

export function fetchdetails(seesionkey) {
  return function (dispatch, getState) {
    fetch(`api url`, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          seesionkey,
        },
        body: JSON.stringify({
          "appcont": getState().mustdata,
          "dataset":{}
        }),
      })
      .then(r => r.json())
      .then((rr) => {
        console.log('------testinresponse',rr);
        if (rr.response.error.errorCode === -4) {
          dispatch({
            type: 'FETCHFAIL',
            payload: ' error  again',
          });
        } else {
          dispatch({
            type: 'FETCHSUCCESS',
            payload: rr,
          });
        }
      })
  }
}

Reducer 文件 #

const initialState = {
    details: {},
    isFetching: false,
    error: false
}
export default function DetailsReducer(state = initialState, action) {
    switch(action.type) {
        case :FETCHSUCCESS
            console.log('action goes here', action)
            return {
                ...state,
                isFetching: false,
                details: action.payload
            }
        case FETCHFAIL:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

组件调用代码 #

componentDidMount() {
 const {seesionkey} = this.props
 this.props.dispatch(fetchdetails(seesionkey));
}

Mock API 示例 #

{   
    "appcont":{
      "id":"34435654605",
      "name":"no data ",
      "details":"dummy details",
      "code":"demo"
   },
   "dataset":{}
}

排查与修复建议 #

1. 修复Reducer语法错误
   Reducer中case :FETCHSUCCESS存在语法错误，冒号位置错误，正确写法应为case 'FETCHSUCCESS':（若使用常量需先定义并导入）。该错误会导致Reducer无法正常解析分支逻辑，直接进入default分支，因此不会有日志输出。

2. 修正GET请求的参数传递方式
   标准GET请求不应该携带body，多数服务器会忽略GET请求的body内容，导致接口无法正确接收参数。建议将参数通过URL查询参数传递，或改为POST请求（需确认接口支持）。

3. 添加请求错误捕获逻辑
   Action中的fetch调用缺少.catch()分支，一旦请求报错（如网络异常、API地址错误）会静默失败，不会触发任何dispatch操作。需补充错误处理：

   .catch(error => {
     console.log('请求失败', error);
     dispatch({ type: 'FETCHFAIL', payload: error.message });
   })
   

4. 验证请求触发的前置条件

   • 打印componentDidMount中的seesionkey，确认参数是否正确传入组件；
   • 确认组件已通过connect方法连接到Redux store，否则this.props.dispatch不存在，调用时会报错（可查看控制台是否有相关报错）；
   • 检查getState().mustdata是否存在且有有效值，空值可能导致请求参数异常。

5. 补充请求状态追踪
   当前Reducer的isFetching始终为false，建议在发起请求时dispatch一个FETCH_START动作，将isFetching设为true，便于追踪请求状态：

   // Action中添加
   dispatch({ type: 'FETCH_START' });
   fetch(...) // 后续代码不变
   
   // Reducer中添加对应分支
   case 'FETCH_START':
     return { ...state, isFetching: true, error: false }
   

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