React/Redux中Promise的then内Action Dispatch未执行问题排查

你的问题出在Promise链式调用的值传递逻辑上，导致receiveShops对应的then回调没有正确执行，最终RECIEVE_SHOPS动作未触发，具体有两个核心问题：

1. 链式调用中丢失了原始位置数据 #

在loadNearbyShops的第一个then回调里，你直接返回了dispatch(getCoords(position))的结果——也就是getCoords生成的action对象，而非原始的position数据。这会导致下一个then拿到的是action对象而非地理位置信息，虽然你的action刚好包含lat和long字段暂时能让fetchShops运行，但这种不规范的传递很容易引发后续逻辑异常。

2. 未正确提取API响应的有效数据 #

fetchShops返回的axios请求Promise，resolve后得到的是axios响应对象（包含data、status等元数据），而非服务器直接返回的业务数据。你直接把这个响应对象传给receiveShops，会导致data.shops不存在，甚至可能因为数据格式错误导致回调逻辑中断。

修正后的代码 #

export function receiveShops(data) { 
  return { type: 'RECIEVE_SHOPS', shops: data.shops, time: Date.now() } 
}

export function fetchShops(location) { 
  return function (dispatch) { 
    dispatch(requestShops()); 
    console.log("--fetchShops--"); 
    console.log(location);
    // 返回axios请求Promise，确保链式调用能拿到响应结果
    return axios({ 
      method: 'get', 
      url: 'http://localhost:3001/nearby', 
      params: { lat: location.lat, long: location.long } 
    });
  } 
}

function getLocation() { 
  return new Promise((resolve, reject) => { 
    if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(pos => { 
        resolve(pos); 
      }, err => {
        // 补充位置获取失败的错误回调
        reject(err.message);
      }); 
    } else { 
      reject("Geolocation is not supported by this browser."); 
    } 
  }); 
}

export function loadNearbyShops() { 
  return function (dispatch) { 
    return getLocation()
      // 修正：dispatch后返回原始position，确保下一个then拿到正确数据
      .then(position => {
        dispatch(getCoords(position));
        return position;
      })
      .then(position => dispatch(fetchShops(position)))
      // 修正：提取axios响应中的业务数据，传给receiveShops
      .then(response => dispatch(receiveShops(response.data)))
      .catch(error => console.log("加载附近店铺失败：", error)); 
  }; 
}

export function getCoords(position) { 
  return { 
    type: 'GET_LOCATION', 
    long: position.coords.longitude, 
    lat: position.coords.latitude 
  }; 
}

额外优化建议 #

• 给navigator.geolocation.getCurrentPosition补充了错误回调，这样用户拒绝位置权限时能捕获到具体错误。
• 请确保requestShops函数已正确实现，否则fetchShops里的dispatch(requestShops())会抛出错误。
• 注意action type拼写：RECIEVE_SHOPS缺少一个字母E（正确拼写是RECEIVE_SHOPS），虽然这不会导致then不执行，但会让reducer无法匹配该action，建议修正。

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