Question

我正在使用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。您可以克隆它或查看我的代码。 https://github.com/nathannewyen/the-beuter

Answer 1

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

// actions

export const getProductsAPI = () => {
    return function(dispatch){
      axios
        .get("http://localhost:8000/api/products")
        .then((res) => {
          dispatch({
            type: "SAVE_API_RESPONSE",
            payload: res.data
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

// reducers

export default (state = initialState, action) => {
    switch (action.type) {
        case "SAVE_API_RESPONSE":
          return {
            ...state,
            products: { ...action.payload } // not sure how you want to structure this
          }

        case ADD_PRODUCT_BASKET:
            ...

        case GET_NUMBERS_BASKET:
            ...

        default:
            return state;
    }
}

在您的组件中：

import { useSelector, useDispatch } from 'react-redux'
import { getProductsAPI }  from '../actions'

const dispatch = useDispatch()
const products = useSelector(state => state.products)

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

所以现在您的api调用是通过redux动作进行的。结果将保存到redux存储并从中读取，而不是从组件中的本地读取。我尚未检查此代码，因此可能需要进行一些调整/修饰，但这应该可以给您一个提示。

如何从猫鼬到Redux获取数据API？

1 个答案: