El envío de mi kit de herramientas redux se activa dos veces, una vez inmediatamente, lo que por alguna razón no actualiza correctamente el estado, luego toda mi aplicación se rompe porque no puede encontrar la información que se supone que se nos proporcionó, luego se activa de nuevo y se actualiza correctamente . Entonces, si actualizo la página, todo se cargará porque luego obtiene la información de mi almacenamiento persistente a tiempo.
Esta es la parte del código donde se llama el envío:
const handleSignUp = (e) => { e.preventDefault(); createUserWithEmailAndPassword(auth, email, password) .then((cred) => { updateProfile(cred.user, { displayName: name }) .then(() => { dispatch( login({ name: name, uid: cred.user.uid, jobDesc: jobDesc, email: email, }) ); }) }) .catch((err) => { console.log(err); }) .finally(() => { setPassword(""); }); };Este es el segmento de usuario desde donde se llama al inicio de sesión:
import { createSlice } from "@reduxjs/toolkit"; const initialState = { user: null, }; export const userSlice = createSlice({ name: "user", initialState, reducers: { login: (state, action) => { state.user = action.payload; }, logout: (state) => { state.user = null; }, }, }); export const { login, logout } = userSlice.actions; export default userSlice.reducer;Revisé mis herramientas de desarrollo de redux, por lo que sé que el envío llama dos veces y si primero se actualiza parcialmente y completamente.
este es un texto copiado de mi consola de herramientas de desarrollo que muestra el estado y sus cambios:
name(pin):null uid(pin):"CK3uLpCLD3hIOa0vXEzhA0oFcwr1" email(pin):"jamesdev@gmail.com"esa es la primera actualización y esta es la segunda:
name(pin):"james" uid(pin):"CK3uLpCLD3hIOa0vXEzhA0oFcwr1" jobDesc(pin):"web dev" email(pin):"jamesdev@gmail.com"Casi pierdo la cabeza tratando de resolver esto, por favor ayuda.
Editar:
A veces también arroja este error al iniciar sesión:
Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.
Te falta un return allí en un lugar, lo que lleva a que todo no espere, sino que se ejecute en paralelo:
.then((cred) => { // vvv this was missing return updateProfile(cred.user, { displayName: name }) .then(() => { dispatch( login({ name: name, uid: cred.user.uid, jobDesc: jobDesc, email: email, }) ); }) }) En general, recomiendo encarecidamente escribir todo como una función async con await , ya que eso lo hace mucho más legible:
const handleSignUp = async (e) => { e.preventDefault(); try { const cred = await createUserWithEmailAndPassword(auth, email, password) await updateProfile(cred.user, { displayName: name }) dispatch( login({ name: name, uid: cred.user.uid, jobDesc: jobDesc, email: email, }) ); } catch (err) { console.log(err); } finally { setPassword(""); }; };