React + Redux 在 App.js 渲染时分派 3 次动作

Question

这段代码我遇到了一些问题，我正在使用 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>
   )
}

Answer 1

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

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

现在，仅当 isAuthenticated 发生变化时，useEffect 中的代码才会运行。

React + Redux 在 App.js 渲染时分派 3 次动作

React + Redux dispatching 3 times an action at render of App.js

dispatch

reactjs

redux

react-router-dom