React + Redux 在 App.js 的渲染中分派 3 次动作答案

【问题标题】：React + Redux dispatching 3 times an action at render of App.jsReact + Redux 在 App.js 的渲染中分派 3 次动作
【发布时间】：2021-06-04 06:24:02
【问题描述】：

我在这段代码中遇到了一些问题，我正在使用 Redux 进行状态管理。我期望的行为是在用户登录后使用调度程序（带有评论的那个）（所以只有一次！），但在 App.js 的每次渲染中调用它三次该操作包含一个 API 调用，所以我得到了三个 API 调用！我不知道如何让它触发一次。知道问题所在吗？

import React from 'react';
import {
  Route, Switch, Redirect,
} from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import Login from './components/auth/login';
import Dashboard from './components/Dashboard';    
import * as actions from './store/actions/indexActions';


export default function App() {
   const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
   const jwt = useSelector((state) => state?.auth?.user?.token);
   const dispatch = useDispatch();
   if (isAuthenticated) {
      dispatch(actions.getRole(jwt));  //THIS DISPATCHER IS CALLED 3 TIMES
   }
   return(
      <Provider store={store}>
         <BrowserRouter basename="/">
            <Switch>
               <Route path="/login" exact>
                  {isAuthenticated ? <Redirect to="/" /> : <Login />}
               </Route>
               <Route exact path="/">
                  {isAuthenticated ? <Dashboard /> : <Redirect to="/login" />}
               </Route>
            </Switch>
        </BrowserRouter>
     </Provider>
   )
}

【问题讨论】：

使用 useEffect 并将 isAuthenticated 作为 useEffect 的依赖项。
您也可以简单地将操作作为登录过程本身的一部分进行调度。

标签： reactjs redux react-router-dom dispatch

【解决方案1】：

您当前在每次组件呈现时调度它。如果您希望仅在用户登录时调用它，则需要将调用包装在 useEffect 中，如下所示：

useEffect(() => 
   if (isAuthenticated) {
      dispatch(actions.getRole(jwt)); 
   }
}, [isAuthenticated]);

现在，useEffect 中的代码只有在 isAuthenticated 更改时才会运行。

【讨论】：