Why is my redux app not caching an async api call in redux-thunk?

Question

Am new to redux. I am working now on an app that shows a list of soccer leagues in each country. Firstly, I am fetching a countries list. Afterwards, I am using the country name to loop through all countries to get the soccer leagues. Not every country has a soccer league, so I get some null as response, which I filter out. Then I click on a league and I am redirected to a league page. Now comes the tricky part. When I click "back", I go to my main page, but the whole api call process gets fired again. Why? How to prevent it? how to only use the data, that I fetched ones, and only use it as I need to.

If I would guess, than the mistake is somewhere in the reducer. I try there to cache the fetched api call in an object ( data: { ...state.data, ...} ), but am not sure, if I do this correctly. The second place, where I could do am istake is the useEffect . But of course anything else is also possible.

Please help!

Here is my code:

App.js I use react-router-dom to move between the conatiners:

import React from 'react';
import {Switch, Route, NavLink, Redirect} from "react-router-dom";
import SignedIn from '../signedIn/signedIn';
import SignedOut from '../signedOut/signedOut';

//Components/Containers
import AllLeagues from '../allLeagues/allLeagues/allLeagues';
import League from "../allLeagues/league/league";

const App = () => {
  return (
    <div className="App">
      <nav>
        <NavLink to={"/"}>SEARCH</NavLink>
      </nav>
      <Switch>
        <Route path={"/"} exact component={AllLeagues} />
        <Route path={"/allLeagues/:league"} exact component={League} />
        <Route path={"/signedin"} exact component={SignedIn} />
        <Route path={"/signedout"} exact component={SignedOut} />
        <Redirect to={"/"} />
      </Switch>
    </div>
  );
}

export default App;

Here is my Page, where I make the api calls to get the countries and the soccer leagues: allLeagues.js

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import {Link} from "react-router-dom";

import _ from "lodash";
import shortid from "shortid";

import  { allLeagues }  from "../../../actions/leagues/allLeagues/allLeagues";
import  { allCountries }  from "../../../actions/allCountries/allCountries";

//the api provides 255 country names.
const ALL_COUNTRIES_LENGTH = 254;

const AllLeagues = () => {
    const dispatch = useDispatch();
    const selectAllCountries = useSelector(state => state.allCountries);
    const selectAllLeagues = useSelector(state => state.allLeagues);

    useEffect(() => {
        dispatch(allCountries());
    }, [dispatch]);

    useEffect(() => {
        if(!_.isEmpty(selectAllCountries.data)) {
            selectAllCountries.data.countries.map(el => dispatch(allLeagues(el.name_en)));
        }
    }, [dispatch, selectAllCountries.data]);

    let allCountriesArr = [];
    let allLeaguesFiltered = [];
    let getAllLeagues = [];

    allCountriesArr = (Object.values(selectAllLeagues.data));

    console.log(Object.values(selectAllLeagues.data));

    if(allCountriesArr.length > ALL_COUNTRIES_LENGTH) {
        allLeaguesFiltered = allCountriesArr.flat().filter(el => el !== null);
        getAllLeagues = allLeaguesFiltered.flat();
    }

    let getAllZeroDivisionLeagues = [];
    let getAllFirstDivisionLeagues = [];
    let getAllSecondDivisionLeagues = [];
    let getAllThirdDivisionLeagues = [];
    if(!_.isEmpty(getAllLeagues)) {
        getAllZeroDivisionLeagues = getAllLeagues.filter(el => el.strDivision === "0");
        getAllFirstDivisionLeagues = getAllLeagues.filter(el => el.strDivision === "1");
        getAllSecondDivisionLeagues = getAllLeagues.filter(el => el.strDivision === "2");
        getAllThirdDivisionLeagues = getAllLeagues.filter(el => el.strDivision === "3");
    }

    const showData = () => {
        if(!_.isEmpty(selectAllLeagues.data)) {
            return(
                <div>
                Most Favorited Leagues:
                <br/>
                {getAllZeroDivisionLeagues.map(el => {
                    return (
                        <div key={shortid.generate()}>
                            <p>{el.strLeague}</p>
                            <Link to={`/allLeagues/${el.strLeague}`}>View</Link>
                        </div>
                    )}
                )}
                <br/>
                <br/>
                First Leagues:
                <br/>
                {getAllFirstDivisionLeagues.map(el => {
                    return (
                        <div key={shortid.generate()}>
                            <p>{el.strLeague}</p>
                            <Link to={`/allLeagues/${el.strLeague}`}>View</Link>
                        </div>
                    )}
                )}
                <br/>
                <br/>
                Second Leagues:
                <br/>
                {getAllSecondDivisionLeagues.map(el => {
                    return (
                        <div key={shortid.generate()}>
                            <p>{el.strLeague}</p>
                            <Link to={`/allLeagues/${el.strLeague}`}>View</Link>
                        </div>
                    )}
                )}
                <br/>
                <br/>
                Third Leagues:
                <br/>
                {getAllThirdDivisionLeagues.map(el => {
                    return (
                        <div key={shortid.generate()}>
                            <p>{el.strLeague}</p>
                            <Link to={`/allLeagues/${el.strLeague}`}>View</Link>
                        </div>
                    )}
                )}
                </div>
            )
        }
        
        if (selectAllLeagues.loading) {
            return <p>loading...</p>
        }

        if (selectAllLeagues.errorMsg !== "") {
            return <p>{selectAllLeagues.errorMsg}</p>
        }

        return <p>Loading...</p>;
    }

return (
    <div>
        <br/>
        <br/>
        All Leagues:
        <br />
        <br />
        {showData()}
    </div>
)
}

export default AllLeagues;

The both action files: allCountries.js

import { GET_ALL_COUNTRIES_LOADING, GET_ALL_COUNTRIES_SUCCESS, GET_ALL_COUNTRIES_FAIL } from "../index";
import theSportsDB from "../../apis/theSportsDB";

export const allCountries = () => async (dispatch) => { 
    try {
        dispatch ({
            type: GET_ALL_COUNTRIES_LOADING
        })

        const response = await theSportsDB.get("all_countries.php");
        
        dispatch ({
            type: GET_ALL_COUNTRIES_SUCCESS,
            payload: response.data
        })
    } catch (e) {
        dispatch ({
            type: GET_ALL_COUNTRIES_FAIL
        })
    }    
}

and allCountriesReducer:

import {GET_ALL_COUNTRIES_LOADING, GET_ALL_COUNTRIES_SUCCESS, GET_ALL_COUNTRIES_FAIL} from "../../actions/index";

const DefaultState = {
    loading: false,
    data: [],
    errorMsg: ""
};

const AllCountriesReducer = (state = DefaultState, action) => {
    switch (action.type){
        case GET_ALL_COUNTRIES_LOADING:
            return {
                ...state,
                loading: true,
                errorMsg: ""
            };
            case GET_ALL_COUNTRIES_SUCCESS:
            return {
                ...state,
                loading: false,
                data: {
                    ...state.data,
                    countries: action.payload.countries
                },
                errorMsg: ""
            };
            case GET_ALL_COUNTRIES_FAIL:
            return {
                ...state,
                loading: false,
                errorMsg: "unable to get all the Countries"
            };
        default:
            return state;
    }
}

export default AllCountriesReducer;

Now the files, with which I fetch the all the leagues (with the country name, that I got from allCountries):

import { GET_ALL_LEAGUES_LOADING, GET_ALL_LEAGUES_SUCCESS, GET_ALL_LEAGUES_FAIL } from "../../index";
import theSportsDB from "../../../apis/theSportsDB";

export const allLeagues = (country) => async (dispatch) => { 
    try {
        dispatch ({
            type: GET_ALL_LEAGUES_LOADING
        })

        const response = await theSportsDB.get(`search_all_leagues.php?c=${country}&s=Soccer`);
        
        dispatch ({
            type: GET_ALL_LEAGUES_SUCCESS,
            payload: response.data,
            countryName: country
        })
    } catch (e) {
        dispatch ({
            type: GET_ALL_LEAGUES_FAIL
        })
    }    
}

and the reducer, allLeaguesReducer.js

import {GET_ALL_LEAGUES_LOADING, GET_ALL_LEAGUES_SUCCESS, GET_ALL_LEAGUES_FAIL} from "../../../actions/index";

const DefaultState = {
    loading: false,
    data: {},
    errorMsg: ""
};

const AllLeaguesReducer = (state = DefaultState, action) => {
    switch (action.type){
        case GET_ALL_LEAGUES_LOADING:
            return {
                ...state,
                loading: true,
                errorMsg: ""
            };
            case GET_ALL_LEAGUES_SUCCESS:
            return {
                ...state,
                loading: false,
                data:{
                    ...state.data,
                    [action.countryName]: action.payload.countrys
                },
                errorMsg: ""
            };
            case GET_ALL_LEAGUES_FAIL:
            return {
                ...state,
                loading: false,
                errorMsg: "unable to get all the leagues"
            };
        default:
            return state;
    }
}

export default AllLeaguesReducer;

Also the leagues page itself:

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import {Link} from "react-router-dom";

import _ from "lodash";
import shortid from "shortid";

import { getLeague } from "../../../actions/leagues/league/getLeague";

const League = (props) => {
    const leagueName = props.match.params.league;
    const dispatch = useDispatch();
    const selectLeague = useSelector(state => state.league);

    useEffect (() => {
        dispatch(getLeague(leagueName));
    }, [dispatch, leagueName]);

     const showLeague = () => {
         if(!_.isEmpty(selectLeague.data)) {
            return selectLeague.data.teams.map(el => {
                return (
                    <div key={shortid.generate()}>
                        {el.strTeam}
                    </div>
                )
            })
         }

         if(selectLeague.loading) {
            return <p>loading...</p>
         }

         if(selectLeague.errorMsg !== "") {
         return <p>{selectLeague.errorMsg}</p>
         }

         return <p>Unable to get the league data</p>
     }

    return (
        <div>
            <p>{leagueName}</p>
            {showLeague()}
            <Link to={"/"}>Back</Link>
        </div>
    )
}

export default League;

its action file:

import { GET_LEAGUE_LOADING, GET_LEAGUE_SUCCESS, GET_LEAGUE_FAIL } from "../../index";
import theSportsDB from "../../../apis/theSportsDB";

export const getLeague = (league) => async (dispatch) => {
    try {
        dispatch ({
            type: GET_LEAGUE_LOADING
        })

        const response = await theSportsDB.get(`search_all_teams.php?l=${league}`);

        dispatch ({
            type: GET_LEAGUE_SUCCESS,
            payload: response.data,
            // leagueName: league
        })
    } catch (e) {
        dispatch ({
            type: GET_LEAGUE_FAIL
        })
    }
}

and the reducer:

import { GET_LEAGUE_LOADING, GET_LEAGUE_SUCCESS, GET_LEAGUE_FAIL } from "../../../actions/index";

const DefaultState = {
    loading: false,
    data: {},
    errorMsg: ""
};

const LeagueReducer = (state = DefaultState, action) => {
    switch (action.type) {
        case GET_LEAGUE_LOADING:
            return {
                ...state,
                loading: true,
                errorMsg: ""
            };

        case GET_LEAGUE_SUCCESS:
            return {
                ...state,
                loading: false,
                data: action.payload,
                errorMsg: ""
            };

        case GET_LEAGUE_FAIL:
            return {
                ...state,
                loading: false,
                errorMsg: "league not found"
            };
    default:
        return state
    }
}

export default LeagueReducer;

In Redux dev Tools, when I press on back, to get again to my home page, the following is triggered (in status bar): GET_ALL_COUNTRIES_LOADING and after some time: GET_ALL_LEAGUES_SUCCESS again. So it is making an api call again.

Answer 1

You need to use a conditional in useEffect so that it doesn't run each time you load the page.

Try this:

useEffect(() => {
    if (selectAllCountries.data.length < 1) {
        disptch(getCountries());
    }
})