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]);

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

Answer 2

使用 Redux，在渲染时调度动作绝对是一个副作用。 Redux 存储会立即更新，这是一个外部可见的（跨应用程序）更改。

因此，永远不要在渲染 React 组件的过程中调度操作。

您应该在

useEffect

的 setup 函数中调度操作，就像 @hellogoodnight 的 anwser 一样。