Reactjs axios返回多个值的Redux Thunk操作
我有一个React应用程序,它使用Reactjs axios返回多个值的Redux Thunk操作,reactjs,redux,react-redux,axios,redux-thunk,Reactjs,Redux,React Redux,Axios,Redux Thunk,我有一个React应用程序,它使用redux thunk和axios获取API。该操作成功发射,但返回多个有效载荷,这意味着它发射了多次 我怎样才能让它只燃烧一次 代码 行动 还原剂 页 下面是它返回的内容只需从useffect的依赖项数组中删除leagueTable,这样它只会在安装组件后获取它们。因为现在有了一个循环: Get leagues->leagueTable Update->Useffect看到依赖项数组中的leagueTable发生了更改,并再次调用Get leagues,我们得
redux thunk
和axios
获取API。该操作成功发射,但返回多个有效载荷,这意味着它发射了多次
我怎样才能让它只燃烧一次
代码
行动
还原剂
页
下面是它返回的内容只需从
useffect
的依赖项数组中删除leagueTable
,这样它只会在安装组件后获取它们。因为现在有了一个循环:
Get leagues->leagueTable Update->Useffect看到依赖项数组中的leagueTable
发生了更改,并再次调用Get leagues,我们得到了一个循环
const-League=props=>{
useffect(()=>{
props.getLeagueTable();
}, []); //
import Axios from "axios";
import { fetchEnglishLeagueTable } from "./ActionTypes";
export function fetchEnglishTable() {
var url = "https://api.football-data.org/v2/competitions/PL/matches";
var token = "52c8d88969d84ac9b17edb956eea33af";
var obj = {
headers: { "X-Auth-Token": token }
};
return dispatch => {
return Axios.get(url, obj)
.then(res => {
dispatch({
type: fetchEnglishLeagueTable,
payload: res.data
});
})
.catch(e => {
console.log("Cant fetch ", e);
});
};
}
import { fetchEnglishLeagueTable } from "../actions/ActionTypes";
const initialState = {
EnglishTable: {}
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case fetchEnglishLeagueTable:
return {
...state,
EnglishTable: action.payload
};
default:
return state;
}
};
export default rootReducer;
const League = props => {
useEffect(() => {
props.getLeagueTable();
}, [props.leagueTable]);
console.log(props.leagueTable);
return <p>ihi</p>;
};
const mapStateToProps = state => ({
leagueTable: state.EnglishTable
});
const mapDispatchToProps = dispatch => {
return { getLeagueTable: () => dispatch(fetchEnglishTable()) };
};
export default connect(mapStateToProps, mapDispatchToProps)(League);
import rootReducer from "./Reducer";
import thunk from "redux-thunk";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;