Reactjs 如何从mongoose到redux获取数据API？

我正在用react和redux进行电子商务

我正在尝试将我的项目添加到购物车中，如何使用redux从后端调用API

以下是我的购物车操作：

import {
    ADD_PRODUCT_BASKET,
    GET_NUMBERS_BASKET
} from '../actions/type'

const initialState = {
    basketNumbers: 0,
    carCost: 0,
    products: {
       ...Product API in here...
    }
}

export default (state = initialState, action) => {
    switch (action.type) {
        case ADD_PRODUCT_BASKET:
            let addQuantity = {
                ...state.products[action.payload]
            }
            console.log(addQuantity)
            return {
                basketNumbers: state.basketNumbers + 1
            };
        case GET_NUMBERS_BASKET:
            return {
                ...state
            };
        default:
            return state;
    }
}

以下是我使用react为前端调用api的方式：

  const [products, setProducts] = useState([]);
  const getProductsAPI = () => {
    axios
      .get("http://localhost:8000/api/products")
      .then((res) => {
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getProductsAPI();
  }, [props]);

这是我的github项目。 您可以克隆它或查看我的代码。

---

我不确定“使用redux从后端调用API”是什么意思，因为redux仍然是前端逻辑的一部分。但我认为您要做的是创建一个redux操作和reducer对来调用您的api

//操作
导出常量getProductsAPI=（）=>{
返回功能（调度）{
axios
.get（“http://localhost:8000/api/products")
。然后（（res）=>{
派遣({
类型：“保存API响应”，
有效载荷：res.data
});
})
.catch（（错误）=>{
控制台日志（err）；
});
}
};

//减速机
导出默认值（状态=初始状态，操作）=>{
开关（动作类型）{
案例“保存API响应”：
返回{
……国家，
产品：{…action.payload}//不确定要如何构造此产品
}
案例添加产品篮：
...
案例获取编号\u篮：
...
违约：
返回状态；
}
}

在您的组件中：

从'react redux'导入{useSelector，useDispatch}
从“../actions”导入{getProductsAPI}
const dispatch=usedpatch（）
const products=useSelector（state=>state.products）
useffect（（）=>{
调度（getProductsAPI（））
}[道具]；

---

现在您的api调用是通过redux操作进行的。结果将保存到redux存储并从中读取，而不是从组件中的本地读取。我还没有检查这段代码，所以可能需要一些调整/润色，但这应该会给你一个想法。

我正在youtube上关注这段视频，我试图从后端获取产品，但在这段视频中，只有前端的产品