my redux toolkit state is not updating properly

Question

My redux toolkit dispatch is firing twice, once immediately which for some reason doesn't properly update the state, then my entire app breaks because it cant't find the info that us supposed to have been provided, then it fires again and updates properly. So if i refresh the page then everything will load up because then it gets the information from my persistent storage in time.

This is the portion of the code where the dispatch is called:

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("");
      });
  };

This is the userSlice where login is called from:

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;

i have checked my redux dev tools so i know the dispatch calls twice and if first udpates partially and the completely.

this is text copied from my dev tools console that displays the state and it's changes:

name(pin):null
uid(pin):"CK3uLpCLD3hIOa0vXEzhA0oFcwr1"
email(pin):"[email protected]"

that is the first update and this is the second:

name(pin):"james"
uid(pin):"CK3uLpCLD3hIOa0vXEzhA0oFcwr1"
jobDesc(pin):"web dev"
email(pin):"[email protected]"

I've almost lost my mind trying to figure this out, please help.

Edit:

Sometimes it also throws this error at Login:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Answer 1

You are missing a return there at one place, which leads to the whole thing not waiting, but running in parallel:

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

Generally I'd highly recommend writing the whole thing as async function with await instead as that makes it a whole lot more readable:

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("");
    };
};