React-Redux中如何避免Store已有数据时重复发起API请求

你当前通过组件内useEffect检查数据是否存在来避免重复请求的方式可行，但可以从数据层（Saga/Reducer） 做更集中、更可靠的控制，以下是几种高效方案：

方案1：在Saga中添加数据存在性检查（推荐） #

把数据校验逻辑从组件移到Saga，让组件只负责触发GET_DATA动作，由Saga判断是否需要发起请求。这样不管组件怎么触发动作，都不会重复请求，逻辑更集中。

修改步骤： #

1. 更新Reducer的初始状态：添加显式标记或统一数据字段，方便Saga判断

const initialState = {
    idx: 0,
    data: null,
    isLoaded: false // 显式标记数据是否加载完成
};

export const setData = (data) => ({ type: "SET_DATA", data }); // 对齐字段名

export default function myReducer(state = initialState, action) {
    switch (action.type) {
        case "SET_DATA":
            return {
                ...state,
                data: action.data,
                isLoaded: true // 标记加载完成
            };
        default:
            return state;
    }
}

2. 在Saga中获取Store状态并检查：利用select effect获取当前state，判断数据是否已存在

// .. imports
import { select } from 'redux-saga/effects';

// 定义selector，方便获取pageA的状态
const selectPageAData = state => state.pageA.data;
const selectPageAIsLoaded = state => state.pageA.isLoaded;

export function* handleGetData(action) {
  // 方式1：直接检查数据是否存在
  const existingData = yield select(selectPageAData);
  if (existingData) {
    return; // 已有数据，直接返回，不发起请求
  }

  // 方式2：用isLoaded标记检查（更清晰，适合数据可能为空的场景）
  // const isLoaded = yield select(selectPageAIsLoaded);
  // if (isLoaded) return;

  try {
      const response = yield call(requestGetData, action);
      const { data } = response;
      yield put(setData(data));
  } catch (error) {
      console.log(error);
  }
}

3. 简化组件逻辑：组件无需再判断，直接触发动作即可

const dispatch = useDispatch();
const rows = useSelector(state => state.pageA.data);

useEffect(() => {
  dispatch(getData()); // 直接触发，由Saga判断是否请求
}, [dispatch])

方案2：优化组件内的检查逻辑 #

如果不想改动Saga，可以优化组件的依赖和判断逻辑，避免不必要的触发：

• 针对列表类数据，用isLoaded标记判断，避免空数组导致的误判
• 减少useEffect的依赖项

const dispatch = useDispatch();
const { data: rows, isLoaded } = useSelector(state => state.pageA);

useEffect(() => {
  if (!isLoaded) {
    dispatch(getData());
  }
}, [dispatch, isLoaded]) // 只依赖isLoaded，避免数据变化触发重复检查

方案3：使用Redux Toolkit简化（长期推荐） #

如果可以升级到Redux Toolkit（RTK），它的createAsyncThunk内置了重复请求处理能力，同时createSlice能更简洁地管理状态：

// 用RTK创建slice
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// 创建异步Thunk，内置重复请求处理
export const getData = createAsyncThunk(
  'pageA/getData',
  async (_, { getState }) => {
    // 检查现有数据
    const { pageA } = getState();
    if (pageA.data) return pageA.data; // 已有数据直接返回

    const response = await axios.get('http://localhost:8080/');
    return response.data;
  }
);

const pageASlice = createSlice({
  name: 'pageA',
  initialState: {
    idx: 0,
    data: null,
    isLoaded: false,
    status: 'idle' // idle/loading/succeeded/failed
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getData.fulfilled, (state, action) => {
        state.data = action.payload;
        state.isLoaded = true;
        state.status = 'succeeded';
      })
      .addCase(getData.pending, (state) => {
        state.status = 'loading';
      });
  }
});

export default pageASlice.reducer;

组件中使用：

const dispatch = useDispatch();
const { data: rows, status } = useSelector(state => state.pageA);

useEffect(() => {
  if (status === 'idle') {
    dispatch(getData());
  }
}, [dispatch, status])

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