React useEffect与Redux：首页API重复调用及缓存方案咨询

1. 点击首页按钮时API是否会重复调用？ #

这取决于你的页面逻辑：

• 如果点击首页按钮是切换路由到首页，且首页组件每次路由切换都会重新挂载，而你的useEffect依赖项是空数组（[]），那么每次组件挂载都会触发API调用，也就是重复请求。
• 如果点击按钮是刷新当前首页（比如调用window.location.reload()），那整个页面重新加载，自然会重新执行useEffect里的API请求。

简单说：只要首页组件重新挂载/页面刷新，当前的代码逻辑就会重复调用API，这就是你看到加载几秒的原因。

2. 能否通过缓存避免重复调用？ #

完全可以，Redux是可行方案，下面给你具体的实现指导（推荐用Redux Toolkit，比传统Redux更简洁）：

步骤1：安装依赖 #

npm install @reduxjs/toolkit react-redux

步骤2：创建新闻数据的Slice（带缓存逻辑） #

在项目里新建src/features/news/newsSlice.js：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchNewsData } from '../../api/newsApi'; // 假设这是你的API请求函数

// 异步获取新闻数据的thunk
export const fetchNews = createAsyncThunk(
  'news/fetchNews',
  async () => {
    const response = await fetchNewsData();
    return response.data;
  }
);

const initialState = {
  data: [],
  isLoading: false,
  error: null,
};

const newsSlice = createSlice({
  name: 'news',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchNews.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchNews.fulfilled, (state, action) => {
        state.isLoading = false;
        state.data = action.payload; // 缓存数据到Redux状态
      })
      .addCase(fetchNews.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      });
  },
});

export default newsSlice.reducer;

步骤3：配置Redux Store #

新建src/app/store.js：

import { configureStore } from '@reduxjs/toolkit';
import newsReducer from '../features/news/newsSlice';

export const store = configureStore({
  reducer: {
    news: newsReducer,
  },
});

步骤4：在根组件注入Store #

修改src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

步骤5：在首页组件使用缓存数据 #

修改你的首页组件：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchNews } from '../features/news/newsSlice';

const Home = () => {
  const { data: newsData, isLoading, error } = useSelector((state) => state.news);
  const dispatch = useDispatch();

  // 只有当缓存数据为空时，才调用API
  useEffect(() => {
    if (newsData.length === 0) {
      dispatch(fetchNews());
    }
  }, [dispatch, newsData.length]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div className="news-cards">
      {newsData.map((news) => (
        <div key={news.id} className="card">
          <img src={news.image} alt={news.title} />
          <h3>{news.title}</h3>
          <p>{news.description}</p>
          <a href={news.link}>查看详情</a>
        </div>
      ))}
    </div>
  );
};

export default Home;

进阶：用RTK Query自动缓存 #

如果觉得手动写缓存逻辑麻烦，Redux Toolkit自带的RTK Query可以自动处理缓存、重复请求拦截，甚至失效时间配置：

1. 在src/app/store.js里添加API切片：

import { configureStore } from '@reduxjs/toolkit';
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 创建API切片
const newsApi = createApi({
  reducerPath: 'newsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '你的API基础地址' }),
  endpoints: (builder) => ({
    getNews: builder.query({
      query: () => '/news', // 你的API接口路径
    }),
  }),
});

// 导出自动生成的hooks
export const { useGetNewsQuery } = newsApi;

export const store = configureStore({
  reducer: {
    [newsApi.reducerPath]: newsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(newsApi.middleware),
});

2. 在首页组件直接使用：

import React from 'react';
import { useGetNewsQuery } from '../app/store';

const Home = () => {
  const { data: newsData, isLoading, error } = useGetNewsQuery();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div className="news-cards">
      {/* 渲染卡片逻辑和之前一致 */}
    </div>
  );
};

RTK Query会自动缓存请求结果，重复调用useGetNewsQuery时直接返回缓存数据，不会重复请求API，还能配置缓存过期时间。

其他可选缓存方案 #

• 组件级缓存：用useRef或者useState存数据，只要组件不卸载，数据就保留；如果需要跨组件共享，还是Redux更合适。
• 本地存储缓存：把数据存在localStorage或sessionStorage，页面刷新后也能读取缓存，但要注意数据过期问题。

内容的提问来源于stack exchange，提问作者Harsh Sharma