如何在useEffect Hook中使用useDispatch？dispatch未生效问题排查

你遇到的核心问题是没有正确调用Redux的action creator，导致dispatch没有收到有效的action对象。

具体问题点 #

在你的useEffect代码中，你写了：

dispatch(signout);

但signout是一个action creator函数，它需要被调用才能返回真正的action对象。直接传递函数本身给dispatch是无效的——Redux不知道该怎么处理一个未执行的函数。这也解释了为什么控制台能打印日志，但状态没有变化：判断逻辑正常执行了，可dispatch根本没拿到正确的action。

修改后的代码 #

只需要把signout改成signout()即可，同时我还加了一点空值检查避免潜在报错：

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { signout } from "./app/state/authSlice";
import Signin from "./app/pages/Signin";
import Landing from "./app/pages/Landing";

const App = (props) => {
 const dispatch = useDispatch();
 const auth = useSelector((state) => state.auth);
 // 加可选链判断，避免auth未初始化时的报错
 const expired = auth?.expires ? new Date(Date.now()) >= new Date(auth.expires) : false;

 useEffect(() => {
  if (expired) {
    console.log("Auth expired.");
    // 调用action creator生成action对象，再传给dispatch
    dispatch(signout());
  }
 }, [dispatch, expired]);

 return (
  <Router>
   <Switch>
    <Route exact path="/" {...props} component={Landing} />
    <Route exact path="/signin" {...props} component={Signin} />
   </Switch>
  </Router>
 );
};

export default App;

额外优化建议 #

1. 简化逻辑：没必要单独封装main函数，直接把判断逻辑写在useEffect里会更简洁直观。
2. 日期格式验证：确保auth.expires是能被new Date()正确解析的格式（比如ISO标准字符串），否则日期比较会出现不准确的情况。
3. 监听auth变化：如果你的auth状态可能在其他地方被修改，也可以考虑把auth加入useEffect的依赖数组，不过当前代码里expired已经依赖了auth，所以没问题。

你提到signout在其他组件的onClick里能正常工作，那肯定是在那些地方你调用了signout()，而不是直接传signout——这就是两者的关键区别啦！

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