aplicaciones
import { useEffect } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./App.css"; import Header from "./components/Header"; import Home from "./components/Home"; import Login from "./components/Login"; import { getUserAuth } from "./actions"; import { connect } from "react-redux"; function App(props) { useEffect(() => { props.getUserAuth(); }, []); return ( <div className="App"> <BrowserRouter> <Header /> <Routes> <Route exact path="/" element={<Login />} /> <Route path="/home" element={<Home />} /> </Routes> </BrowserRouter> </div> ); } const mapStateToProps = (state) => { return {}; }; const mapDispatchToProps = (dispatch) => ({ getUserAuth: () => dispatch(getUserAuth()), }); export default connect(mapStateToProps, mapDispatchToProps)(App);Archivo siguiente
import { auth, provider } from "../firebase"; import { signInWithPopup, onAuthStateChanged, signOut } from "firebase/auth"; import { SET_USER } from "./actionType"; export const setUser = (payload) => ({ type: SET_USER, user: payload, }); export function signInAPI() { return (dispatch) => { signInWithPopup(auth, provider) .then((payload) => { console.log(payload.user); // dispatch(setUser(payload.user)); }) .catch((error) => alert(error.message)); }; } export function getUserAuth() { return (dispatch) => { onAuthStateChanged(auth, (user) => { console.log(user); if (user) { dispatch(setUser(user)); } }); }; } export function signOutAPI() { return (dispatch) => { signOut(auth) .then(() => { dispatch(setUser(null)); }) .catch((error) => { console.log(error.message); }); }; } ¿Son correctas mis signInAPI , getUserAuth() y signOutAPI() ? Obteniendo el error react_devtools_backend.js:3973 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render .
onAuthStateChanged es una suscripción, debe llamarse en un gancho useEffect para establecer una suscripción, es decir, recibir actualizaciones, cuando cambia el estado de autenticación. En lugar de invocarlo en una acción, useEffect en un gancho useEffect. La devolución de llamada onAuthStateChanged debería enviar acciones a su tienda Redux para actualizar el estado local.
Ejemplo:
import { onAuthStateChanged } from "firebase/auth"; import { auth } from "../firebase"; useEffect(() => { // Subscribe to auth state changes when component mounts const unsubscribe = onAuthStateChanged(auth, (user) => { console.log(user); dispatch(setUser(user)); // user is user object or null }); // Return cleanup function to unsubscribe from firebase auth return unsubscribe; }, []);