我在控制台中的redux操作中获得了产品，但当我在组件中使用相同的功能并试图通过使用选择器挂钩获得产品时，我得到了未定义

Question

这是一个API调用，在控制台中，我获取所有产品。但当我在组件中使用相同的getProducts函数时，我在控制台中得到了未定义

export const getProducts = ()=> async(dispatch)=>{
try {
const data = await fetch("http://localhost:80/api/products/getallproducts",{
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});
}
}

我在主页上使用它，得到了未定义的产品，因为我使用的是getProducts的相同功能

import React, { useEffect } from 'react'
import Categories from '../components/Categories'
import Banner1 from '../components/Banner1'
import MaterialUiaresoul from '../components/MaterialUiaresoul'
import ProductSlide from '../components/ProductSlide'
import FeaturedProducts from '../components/FeaturedProducts'
import { useDispatch, useSelector } from 'react-redux'
import { getProducts } from '../redux/actions/action'

const Home = () => {

const  products  = useSelector(state => state.getproductsdata);
console.log(products)
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProducts());
}, [dispatch]);
return (
<>

<MaterialUiaresoul/>
<ProductSlide/>
<Banner1/>
<Categories/>
<FeaturedProducts />

</>

)
}
export default Home

Answer 1

您正在尝试调度非redux操作的内容。

让我们看看，你正试图将这条线路称为dispatch(getProducts());在getProduct调用之后，它将返回一个新的异步函数，该函数未被调用，并期望在其中传递dispatch

通常操作如下：

export function addTodo(text) {
return { type: ADD_TODO, text }
}

它只是一个返回类型为必需属性的普通对象的函数。

当使用redux处理api调用时，最好查看一些对您有帮助的库，例如redux-thunk或redux-saga。Redux操作默认同步，使用一些中间件可以达到异步行为。

在您的示例中，如果您要运行getProduct函数，然后使用传递的dispatch作为第一个参数运行响应，则可以使代码按预期工作：

const dispatch = useDispatch();
const createApiCall = getProduct();
createApiCall(dispatch)

我仍然不确定它是否会起作用，并建议你看看redux thunk。它很容易学习和使用。