我从App.js文件中的API获取所有团队，并将所有获取的团队存储在一个数组中，状态由Redux管理。
这是我的App.js，我在其中使用getTeams（）函数将团队发送到Redux。

import React, {useEffect} from 'react';
import { Route, Switch } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { teamActions } from './store/team-slice';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import Teams from './components/pages/Teams';
import Home from './components/pages/Home';
import TeamInfo from './components/pages/TeamInfo';

const App = ()=> {
const dispatch = useDispatch();
const getTeams = () => {
    fetch(`https://www.balldontlie.io/api/v1/teams`)
    .then(res => res.json())
    .then(data => dispatch(teamActions.sortTeams(data.data)));
    }

    useEffect(() => {
    getTeams();
    }, []);

  return (
    <>
      <Header/>
      <Switch>
        <Route exact path={'/'} component={Home}></Route>
        <Route exact path={'/teams'} component={Teams}></Route>
        <Route exact path={'/team/:teamName'} component={TeamInfo}></Route>
      </Switch>
      <Footer/>
    </>
  );
}

export default App;

在Redux中，我将团队存储在一个名为totalTeams的数组中：

import { createSlice } from "@reduxjs/toolkit";

const teamInitialState = {totalTeams: [], easternTeams:[], westernTeams:[]};

const teamSlice = createSlice({
    name: 'team',
    initialState: teamInitialState,
    reducers: {
        sortTeams(state, action){
            state.totalTeams = action.payload;
            state.westernTeams = action.payload.filter(team => team.conference === 'West');
            state.easternTeams = action.payload.filter(team => team.conference === 'East');
        }
    }
});

export const teamActions = teamSlice.actions;
export default teamSlice;

然后，我有一个“Team Info”页面，在该页面中，我使用useParams从url中获取团队名称，以便从totalTeams的redux数组中过滤出当前团队。
然后，我使用这些数据来填充页面的团队信息，一切工作，直到我刷新页面，然后我失去了所有的数据。
既然我使用Redux数组来查找团队信息，那么所有的数据不都应该在那里吗？每次页面重载时都要获取API，并且数据会保存到数组中，为什么我会丢失状态呢？

import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import Container from '../layout/Container';
import classes from './TeamInfo.module.css'

const TeamInfo = () => {
  const teams = useSelector(state => state.team.totalTeams);
  const params = useParams();
  const teamSlug = params.teamName;
  const teamNoDashes = teamSlug.replace(/-/g, ' ');
  const currentTeam = teams && teams.find(team => team.full_name.toLowerCase() === teamNoDashes);

  return (
    <Container>
      <div className={classes['team-info-container']}>
        <div><img src={`/img/team-logos-grid/${teamSlug}.png`} alt={teamSlug} /></div>
        <div>
          <h2>{currentTeam.full_name}</h2>
          <ul>
            <li>City: {currentTeam.city}</li>
            <li>Division: {currentTeam.division}</li>
            <li>Conference: {currentTeam.conference}</li>
          </ul>
        </div>
      </div>
    </Container>
  )
}

export default TeamInfo;