如何将数据从mongose获取到redux

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仍然是前端逻辑的一部分。但我认为您所要做的是创建一个redux操作和reducer对来调用您的api。

// 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存储中并从中读取，而不是从组件中的本地存储中读取。我还没有检查过这个代码，所以它可能需要一些调整/抛光，但这应该会给你一个想法。