How can I dispatch an action using useEffect in main app.js?

Question

I want to dispatch an action whenever any page or component of my app loads. So what I am trying to do is to dispatch the action using store.dispatch inside useEffect hook in main App.js file.

When I try, it gives a Maximum update depth exceeded Error

I have seen it done in a tutorial or two, I just cant find what I am doing wrong. Is there any other way of achieving this? Please take a look!

Here is my App.js

import React, { useEffect } from "react";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import Login from "./pages/Login";
import Landing from "./pages/Landing";
import Contact from "./pages/Contact";
import Dashboard from "./pages/Dashboard";

import store from "./store";
import { loadUser } from "./tasks/authT";
import setAuthToken from "./utils/setAuthToken";
import PrivateRoutes from "./utils/PrivateRoutes";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);
  return (
    // <Landing />
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<Landing />} />
          <Route exact path="/contact" element={<Contact />} />
          <Route exact path="/login" element={<Login />} />
          <Route
            exact
            path="/dashboard"
            element={
              <PrivateRoutes>
                <Dashboard />
              </PrivateRoutes>
            }
          />
        </Routes>
      </BrowserRouter>
    </Provider>
  );
};

export default App;

this is the action I am trying to dispatch

export const loadUser = () => async (dispatch) => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    const res = await axios.get("/api/auth");
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (error) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Answer 1

Try to use hook useDispatch from react-redux. Also wrap your App.js in <Provider store={store}> .

index.js

<Provider store={store}>
     <App />
</Provider>

App.js

import { useDispatch } from 'react-redux';
const App = () => {
     const dispatch = useDispatch();
     ...
     useEffect(() => {
         loadUser()(dispatch);
     }, []);
     ...

}

Answer 2

That error occurs because:

if (localStorage.token) {
    setAuthToken(localStorage.token);
}

that cause a component render, so useEffect triggers and dispatch loadUser().

useEffect(() => {
    store.dispatch(loadUser());
}, []);

it triggers because the dependency array is empty. I suggest to add authToken as a dependency in the array.

useEffect(() => {
    store.dispatch(loadUser());
}, [authToken]);