Redux中loadUser Action被调用但页面刷新时未执行该如何解决

问题原因 #

你在Navbar组件的useEffect中调用dispatch时，没有执行loadUser函数：
loadUser是一个返回异步函数的高阶thunk函数，只有执行后返回的异步函数才会被redux-thunk中间件识别并执行。你当前直接把loadUser的函数定义传给了dispatch，中间件不会触发内部逻辑，因此看不到loadUser内的日志输出。

修复方案 #

修改Navbar组件中useEffect内的dispatch调用代码，给loadUser加括号执行：

useEffect(() => {
  try {
    // 原错误写法：dispatch(userActions.loadUser)
    dispatch(userActions.loadUser())
  } catch (error) {
    console.log("Error while loading user call");
  }
}, [dispatch]);

优化建议 #

• 调用前可以先判断localStorage中是否存在token，避免发起无效的用户信息请求
• 记得把dispatch加入useEffect的依赖数组，dispatch的引用是稳定的，不会触发额外的重复执行
• 外层的try/catch无法捕获loadUser内部的异步错误，相关错误已经在loadUser的catch分支中做了处理，可以考虑移除外层冗余的try/catch逻辑

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