useEffect中无法访问Redux state？如何避免重复API请求

你要的Redux store预校验拦截重复请求的逻辑完全可落地，具体实现方式如下：

前置要求 #

首先确保Redux中存储用户数据的结构便于按userId查询，优先推荐使用字典结构（键为userId，值为对应用户信息），查询时间复杂度为O(1)；如果当前项目用数组存储用户数据也可兼容，仅查询性能稍差，数据量小时无感知。
推荐的store中users字段结构示例：

{
  users: {
    1: { id: 1, username: "test1", avatar: "xxx" },
    2: { id: 2, username: "test2", avatar: "xxx" }
  }
}

组件层实现代码 #

注意useEffect不能传空依赖数组，否则会因闭包陷阱拿到首次渲染的旧users数据，导致判断失效。

场景1：users为字典结构（推荐） #

const { userId, users, fetchUser } = props;

useEffect(() => {
  // 判断逻辑：对应userId的用户数据已存在，且不是加载中的占位状态
  const userAlreadyExists = Boolean(users?.[userId] && !users[userId].isLoading);
  if (!userAlreadyExists) {
    fetchUser(userId);
  }
}, [userId, users, fetchUser]);

场景2：users为数组结构 #

const { userId, users, fetchUser } = props;

useEffect(() => {
  // 遍历数组判断是否存在对应用户
  const userAlreadyExists = users?.some(user => user.id === userId && !user.isLoading);
  if (!userAlreadyExists) {
    fetchUser(userId);
  }
}, [userId, users, fetchUser]);

兜底优化注意事项 #

• 并发场景拦截：如果多个同userId的PostItem在极短时间内同时挂载，组件层的判断可能来不及拦截重复请求（第一个组件发起请求但数据还没写入store时，后续组件判断为不存在也会发请求），可以在fetchUser的异步action层再加一层判断：检测到当前userId对应的请求处于pending状态时，直接返回不重复发起请求，彻底覆盖并发场景。
• 禁止空依赖数组：空依赖会导致effect内的users值永远是组件首次挂载时的快照，后续其他组件拉取用户数据更新store后，当前组件不会重新校验，容易出现数据漏拉、判断错误的问题。
• 方案适配：如果帖子列表关联的用户总量很小，也可以把用户数据拉取逻辑提到帖子列表父组件，统一拉取完所有关联用户数据后再传给子组件，省去子组件的判断逻辑；但如果是长列表分页、数据量大的场景，还是按需拉取+store缓存的方案灵活性更高。

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