使用useEffect+async/await向Redux拉取数据首次渲染失效问题

问题根因 #

1. loadAuth 没有正确等待Firebase认证状态返回就提前结束
   firebaseAuth.onAuthStateChanged 是事件监听回调，不是同步或可等待的异步逻辑。你把它放在async函数里但没有做Promise封装，函数会在回调触发前就执行finally块返回当前的authObject，首次调用时认证还未完成，返回的永远是未登录状态，导致后续fetchAppData判断authCheck?.loggedIn直接不执行。
   等你第二次刷新的时候，Firebase本地缓存了登录状态，onAuthStateChanged回调触发更快，才有可能刚好在返回前完成Redux的auth状态更新，这就是为什么要刷两次才生效。

2. loadAppData 执行完成后直接锁死了数据拉取开关
   你在finally块里直接把loadingAppDataComplete设为true，不管这次调用有没有真的完成认证、拉到数据。第一次调用loadAppData时因为拿到的是未登录的auth结果，数据拉取没执行，但开关已经被锁死，后续就算authObject依赖更新触发useEffect，canFetchData的判断也不会通过，逻辑再也不会执行。

3. 其他次要问题

• fetchAppData 中调用fetchDraftPosts时使用的是全局的authObject?.userId，而不是你传入的authCheck参数，可能出现参数和全局状态不一致的问题
• 你直接在组件外引入全局Store调用dispatch、getState，不符合Redux在React组件中的使用规范，容易出现状态读取不及时的问题

修复方案 #

1. 重写loadAuth，把onAuthStateChanged封装成Promise，确保拿到认证状态后再返回

export default async function loadAuth() {
  return new Promise((resolve) => {
    const unsubscribe = firebaseAuth.onAuthStateChanged(function (user) {
      unsubscribe() // 取消监听避免重复触发
      if (user) {
        const uid = String(user.uid)
        console.log("logged user with id " + uid)
        Store.dispatch(logUser({ emailAddress: user.email, userId: uid, loggedIn: true }))
      }
      resolve(Store.getState().authObject)
    })
  })
}

2. 修改loadAppData的锁逻辑，只有真的拉取到数据后再锁开关，未登录的情况不要锁

async function loadAppData() {
  if (canFetchData) {
    try {
      setStillFetchingData('pending')
      const authResponse = await loadAuth()
      // 未登录的情况直接结束，不锁开关，后续登录后还能触发
      if (!authResponse?.loggedIn) return
      const dataStatusCheck = await fetchAppData(authResponse)
      console.log(dataStatusCheck)
      // 只有完成数据拉取后再锁开关
      setLoadingAppDataComplete(true)
    } catch {
      console.log("something went wrong")
    } finally {
      setStillFetchingData('idle')
    }
  } 
}

3. 修复fetchAppData里的参数引用问题，把authObject?.userId改成authCheck.userId

// 修改前
await Store.dispatch(fetchDraftPosts(authObject?.userId))
// 修改后
await Store.dispatch(fetchDraftPosts(authCheck.userId))

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