Действие Redux Thunk с ax ios, возвращающим несколько значений - PullRequest
Новая
       33

Действие Redux Thunk с ax ios, возвращающим несколько значений

1 голос
/ 01 марта 2020

У меня есть приложение 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;

Вот что возвращает Multiple Action firing

1 Ответ

1 голос
/ 01 марта 2020

Просто удалите leagueTable из массива зависимостей useEffect, чтобы он получал их только после монтирования компонента. Потому что теперь у вас есть все oop:

Получить лиги -> обновления leagueTable -> useEffect видит, что leagueTable изменилось в массиве зависимостей, и вызывает снова, чтобы получить лиги, и у нас есть все oop. 

const League = props => {
  useEffect(() => {
    props.getLeagueTable();
  }, []); // <~ no props.leagueTable here
  console.log(props.leagueTable);
  return <p>ihi</p>;
};

Надеюсь, это поможет:)

...