如何使用React Redux和Axios在加载组件上获取数据

Question

我需要在组件加载时从API获取数据，我使用axios获取数据，需要保存对状态的响应，并在组件加载后返回。但我可以做这方面的新手。

我的代码如下。

Sales.js：(这是我获取组件的地方(

function SalesDesk() {
return (
<div>
<FoodScreen />
</div>
)}
export default SalesDesk;

FoodScreen.js(这是我需要将结果列为变量的地方，以便稍后进行映射(

function FoodScreen() {
return(
<div className="sdFoodScreenMain">
{console.log(items)} // The results should be displayed here
</div>
)}
export default FoodScreen;

API.js(这里是我使用axios路由器的位置(

const API_URL = `https://jsonplaceholder.typicode.com/`; //Mock api for test purposes
export const GetAllItems = () => {
return (dispatch) => {
axios.get(API_URL)
.then(response => {
dispatch(allItemsList(response.data));
})
}
};

ItemsReducer.js(还原器逻辑(

const ItemsReducer =(state:Array  = null, action) =>{
if (action.type === 'ALL_ITEMS') {
return GetAllItems ;
} else {
return state= null;
}
};
export default ItemsReducer

SalesAction.js(操作列表(

export const allItemsList = () => {
return {
type: 'ALL_ITEMS'
};
};

我所需要做的就是从API获取数据，并在组件渲染时将其显示在控制台中，这样我就可以在div框的映射中显示它，以备将来使用。我是react和Redux的新手，所以忽略任何逻辑或实现问题。

Answer 1

首先Router.js是一个坏名字(api.js等(，您应该使用"react redux"中的｛connect｝将Sales.js连接到redux。看那里https://redux.js.org/basics/usage-with-react并调用操作以在Sales.js 中获取数据

Answer 2

我只需要在组件渲染器上添加一个useDispatch，这样它就可以在加载时将数据提取到组件。

import Reactfrom 'react'
import {useDispatch} from "react-redux";
import {GetAllItems} from 'API' //File containing the axios function
export function SalesDesk() {
const dispatch = useDispatch();
dispatch(GetAllItems())
return (
<div>
<FoodScreen />
</div>
)}

这帮助我在组件加载时获取添加到状态。