带有 axios 返回多个值的 Redux Thunk 操作

Posted

技术标签:

【中文标题】带有 axios 返回多个值的 Redux Thunk 操作【英文标题】:Redux Thunk action with axios returning multiple values 【发布时间】:2020-06-13 22:33:01 【问题描述】:

我有一个 React 应用程序,它使用 redux-thunkaxios 来获取 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 中的状态吗?

如何使用 redux 和 redux-promise 将多个 axios 调用合并到一个有效负载中?

Axios 和 Redux 返回 undefined,然后解析