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, }); } };

Vitaliy Rayets · Accepted Answer · 2022-02-07 16:06:01Z

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); }, []); ... }

edited Feb 7, 2022 at 16:06

answered Feb 7, 2022 at 15:49

Vitaliy Rayets

2,4041 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cal Irvine Over a year ago

I don't think this will work unless the Provider is lifted to a parent component (In this case, most likely the ReactDOM.render())

Ahmad Malik Over a year ago

tried it!! apps starts fine but when page reloads it gives the same maximum update depth exceeded warning

Vitaliy Rayets Over a year ago

This problem usually occurs when call function inside the render method which will cause to re-render and will call again and re-rendering again and so on so all you need to make refer to function not calling it to fix the issue do this.

Andronicus · Accepted Answer · 2022-05-12 05:57:26Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related