带有 axios 返回多个值的 Redux Thunk 操作
Posted
技术标签:
【中文标题】带有 axios 返回多个值的 Redux Thunk 操作【英文标题】:Redux Thunk action with axios returning multiple values 【发布时间】:2020-06-13 22:33:01 【问题描述】:我有一个 React 应用程序,它使用 redux-thunk
和 axios
来获取 API。该动作成功触发,但返回多个有效负载,这意味着它会触发多次。
我怎样才能让它只触发一次?
代码
动作
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;
这是它返回的
【问题讨论】:
【参考方案1】:只需从useEffect
的依赖数组中删除leagueTable
,这样它只会在组件安装后获取它们。因为现在你有一个循环:
获取联赛 -> 联赛表更新 -> useEffect 发现 leagueTable
在依赖数组中发生了变化,并再次调用获取联赛,我们有一个循环。
const League = props =>
useEffect(() =>
props.getLeagueTable();
, []); // <~ no props.leagueTable here
console.log(props.leagueTable);
return <p>ihi</p>;
;
希望对你有帮助:)
【讨论】:
以上是关于带有 axios 返回多个值的 Redux Thunk 操作的主要内容,如果未能解决你的问题,请参考以下文章
在 React Redux 中调度操作之前等待多个 Axios 调用
我的 Redux 处理来自 axios 的错误应该使用不同的操作还是使用附加数据的相同操作?
使用带有 JWT 令牌的 Axios 对 Redux saga 产生调用的无限循环
我可以使用 redux 工具包访问带有 axios 的 createAsyncThunk 中的状态吗?