如何在 useEffect() 挂钩中使用 useDispatch() 挂钩？答案

【问题标题】：How to use the useDispatch() hook inside the useEffect() hook?如何在 useEffect() 挂钩中使用 useDispatch() 挂钩？
【发布时间】：2021-02-13 02:10:16
【问题描述】：

我在我的功能 App 组件中使用 useEffect() 挂钩来检查身份验证是否已过期，以便我可以调度一个操作来删除持久的身份验证状态（使用 redux-persist）。下面是代码：

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);
  const expired = new Date(Date.now()) >= new Date(auth.expires);
  useEffect(() => {
    const main = () => {
      if (expired) {
        console.log("Auth expired.");
        dispatch(signout);
      }
    };
    main();
  }, [dispatch, expired]);

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

export default App;

现在，当到期时间过去时，我收到了Auth expired 控制台日志，但没有发生调度，并且我的状态在到期时间后仍然存在。我知道注销操作已正确配置，因为我在另一个组件 onClick 中使用它。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

这只是一个错字。我忘了打电话给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 SigninPage from "./app/pages/Signin";
import LandingPage from "./app/pages/Landing";

const App = (props) => {
  const dispatch = useDispatch();
  const auth = useSelector((state) => state.auth);
  const expired = new Date(Date.now()) >= new Date(auth.expires);
  useEffect(() => {
    const main = () => {
      if (expired) {
        console.log("Auth expired.");
        dispatch(signout());
      }
    };
    main();
  }, [dispatch, expired]);

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

export default App;

【讨论】：