為什么我的 redux 應用程序沒有在 redux-thunk 中緩存異步 api 調用？

Question

我是 redux 的新手。 我現在正在開發一個應用程序，該應用程序顯示每個國家/地區的足球聯賽列表。 首先，我正在獲取一個國家/地區列表。 之后，我使用國家/地區名稱遍歷所有國家/地區以獲取足球聯賽。 不是每個國家都有足球聯賽，所以我得到了一些null作為響應，我將其過濾掉。 然后我點擊一個聯賽，然后我被重定向到一個聯賽頁面。 現在是棘手的部分。 當我單擊“返回”時，我會轉到主頁面，但是整個 api 調用過程再次被觸發。 為什么？ 如何預防？ 如何僅使用我獲取的數據，並且僅在需要時使用它。

如果我猜的話，那么錯誤就在減速器的某個地方。 我嘗試在一個對象（ data: { ...state.data, ...} ）中緩存獲取的 api 調用，但我不確定，如果我這樣做正確。 第二個地方，我可以做的就是useEffect 。 但當然其他任何事情也是可能的。

請幫忙！

這是我的代碼：

App.js 我使用 react-router-dom 在容器之間移動：

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;

這是我的頁面，我在那里調用 api 來獲取國家和足球聯賽：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;

兩個動作文件：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
        })
    }    
}

和 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;

現在文件，我用它獲取所有聯賽（帶有國家名稱，我從所有國家獲得）：

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
        })
    }    
}

和減速器 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;

還有聯賽頁面本身：

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;

它的動作文件：

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
        })
    }
}

和減速機：

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;

在 Redux 開發工具中，當我按下返回鍵以再次返回我的主頁時，會觸發以下內容（在狀態欄中）：GET_ALL_COUNTRIES_LOADING 一段時間后：再次 GET_ALL_LEAGUES_SUCCESS。 所以它再次進行api調用。

Answer 1

您需要在useEffect使用條件，以便它不會在您每次加載頁面時都運行。

嘗試這個：

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