Redux Action组件中调用的getProducts方法失效求助

action.js中的getProducts方法在服务器重启后突然失效，此前可正常运行。

相关代码 #

action.js中的getProducts方法 #

const getProducts = () => async (dispatch) => { 
    try { 
           const data = await fetch("http://localhost:8005/getproducts", 
           {  method: "GET", 
              headers: {     
                 "Content-Type": "application/json"
               }
           });
           const res = await data.json();
           console.log(res);
           dispatch({ type: "SUCCESS_GET_PRODUCTS", payload: res });
    } catch (error) {
           dispatch({ type: "FAIL_GET_PRODUCTS", payload: error.response });
     }
}
export default getProducts;

组件调用代码 #

const { products } = useSelector(state => state.getProReducer);
console.log(products)
const dispatch = useDispatch();

useEffect(() => {
    dispatch(getProducts());
});

}

1. 先确认后端服务状态 #

直接在浏览器地址栏访问http://localhost:8005/getproducts，看能否返回正常JSON数据。如果浏览器提示无法访问、500错误等，说明后端服务没启动或接口异常，先把后端服务恢复正常。

2. 修复fetch错误处理逻辑 #

原生fetch不会把404、500这类HTTP错误抛进catch块，只有网络故障才会触发catch。当前代码里的error.response是Axios的写法，和fetch不兼容，修改如下：

const getProducts = () => async (dispatch) => { 
    try { 
           const data = await fetch("http://localhost:8005/getproducts", 
           {  method: "GET", 
              headers: {     
                 "Content-Type": "application/json"
               }
           });
           // 新增：检查HTTP响应状态
           if (!data.ok) {
               throw new Error(`请求失败，状态码：${data.status}`);
           }
           const res = await data.json();
           console.log(res);
           dispatch({ type: "SUCCESS_GET_PRODUCTS", payload: res });
    } catch (error) {
           dispatch({ type: "FAIL_GET_PRODUCTS", payload: error.message });
           console.error("获取产品失败：", error);
     }
}
export default getProducts;

3. 解决useEffect无限循环问题 #

你的useEffect没有依赖数组，会导致组件每次渲染都重复调用dispatch(getProducts())，可能引发异常行为。加上空依赖数组，确保仅在组件挂载时调用一次：

useEffect(() => {
    dispatch(getProducts());
}, []); // 新增空依赖数组

4. 检查Redux reducer的处理逻辑 #

确认getProReducer正确处理了对应的action类型，示例如下：

const initialState = {
    products: [],
    error: null
};

const getProReducer = (state = initialState, action) => {
    switch(action.type) {
        case "SUCCESS_GET_PRODUCTS":
            return {
                ...state,
                products: action.payload,
                error: null
            };
        case "FAIL_GET_PRODUCTS":
            return {
                ...state,
                error: action.payload
            };
        default:
            return state;
    }
};
export default getProReducer;

5. 查看浏览器控制台定位问题 #

打开浏览器开发者工具（F12）：

• 看Network标签：检查getproducts请求的状态码、响应内容，确认请求是否发出、后端返回结果。
• 看Console标签：查看console.log(res)和错误日志，获取具体报错信息。

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