createListenerMiddleware initial load error without a dispatch function in React

[gautamsarawagi]

I am using a createListenerMiddleware in my application and this is the reduxStore code for it:

import { Action, configureStore, ThunkAction, createListenerMiddleware } from '@reduxjs/toolkit'
import { onAuthStateChanged } from 'firebase/auth'
import authReducer, { selectAuthStatus, setAuthError, setStatus, setUser } from "~/slices/authSlice"
import { auth } from './lib/firebase'

export const listernerMiddleware = createListenerMiddleware()

export const store = configureStore({
  reducer: {
    auth: authReducer
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(listernerMiddleware.middleware)
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>

// for the first time rendering the page -- checking the status of authentication
listernerMiddleware.startListening.withTypes<RootState, AppDispatch>()({
  predicate: (_action, currentState, previousState) => {
    return currentState.auth.status === 'initialCheck'
  },
  effect: async (_action, listenerApi) => {
    listenerApi.cancelActiveListeners()
    try {
      listenerApi.dispatch(setStatus('loading'));

      console.log("This is getting called")
      onAuthStateChanged(auth, (user) => {
      console.log("This is getting called 2")
        if (user) {
          user.getIdToken().then((accessToken) => {
            const userData = {
              uid: user.uid,
              name: user.displayName,
              email: user.email,
              photoURL: user.photoURL,
              accessToken: accessToken,
            };
            listenerApi.dispatch(setUser(userData));
          });
        } else {
          listenerApi.dispatch(setUser(null));
        }
        listenerApi.dispatch(setStatus('idle'));
              });
    } catch (err) {
      listenerApi.dispatch(setAuthError('There might be something wrong with the crednetials'))
      listenerApi.dispatch(setStatus('failed'));
    }
  }
})

// whenever we expecitly logout for some reason
listernerMiddleware.startListening.withTypes<RootState, AppDispatch>()({
  predicate: (_auth,currentState,previousState) => {
    return currentState.auth.user !== previousState.auth.user && currentState.auth.user === null
  },
  effect: async (_action, listernerApi) => {
    console.log("Second Middleware for Protected Routes")
    listernerApi.cancelActiveListeners()

    await listernerApi.delay(10)
    
    listernerApi.dispatch(setStatus('failed'))
  }
})

and this the code of authSlice:

import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { GoogleAuthProvider, signInWithPopup, signOut, User } from "firebase/auth";
import { setupFirebase, auth } from "~/lib/firebase";
import { RootState } from '~/reduxStore'

setupFirebase()

interface UserValues {
    uid: User['uid'],
    name: User['displayName'],
    accessToken: string
    email: User['email'],
    photoURL: User['photoURL']
}
export interface AuthState {
    user: UserValues | null
    status: 'idle' | 'loading' | 'failed' | 'initialCheck',
    error?: {message : string}
}

export const initialState: AuthState = {
    user: null,
    status: 'initialCheck'
}

export const loginWithGoogle = createAsyncThunk<UserValues, void, { rejectValue: string }>(
    'auth/login',
    async (_, { rejectWithValue }) => {
        try {
        const provider = new GoogleAuthProvider();

            const result = await signInWithPopup(auth, provider);
            const accessToken = await result.user.getIdToken();

            const userData: UserValues = {
                uid: result.user.uid,
                name: result.user.displayName || null,
                email: result.user.email || null,
                photoURL: result.user.photoURL || null,
                accessToken
            };
            return userData;
        } catch (error) {
            if(!auth) return rejectWithValue('Auth Credentials Wrong')
            return rejectWithValue('Login With Google Failed');
        }
    }
);

export const logoutUser = createAsyncThunk<void, void, { rejectValue: string }>(
    'auth/logout',
    async (_, { rejectWithValue }) => {
        try {
            await signOut(auth);
        } catch (error) {
            if (!auth) rejectWithValue('Firebase Not Initialized');
            return rejectWithValue('Logout Functionality Not working');
        }
    }
);

export const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        setUser: (state, action: PayloadAction<UserValues | null>) => {
            state.user = action.payload,
                state.status = 'idle';
        },
        setStatus: (state, action: PayloadAction<'idle' | 'loading' | 'failed' | 'initialCheck'>) => {
            state.status = action.payload
        },
        setAuthError: (state, action: PayloadAction<string>) => {
            state.error = {message : action.payload}
        }
    },
    extraReducers: builder => {
        builder
            .addCase(loginWithGoogle.pending, state => {
                state.status = 'loading'
            })
            .addCase(loginWithGoogle.fulfilled, (state, action: PayloadAction<UserValues | null>) => {
                state.status = 'idle'
                state.user = action.payload
            })
            .addCase(loginWithGoogle.rejected, (state,action) => {
                state.status = 'failed'
                state.error = {message : action.payload as string}
            })
            .addCase(logoutUser.pending, state => {
                state.status = 'loading'
            })
            .addCase(logoutUser.fulfilled, state => {
                state.status = 'idle'
                state.user = null;  
            })
            .addCase(logoutUser.rejected, (state,action) => {
                state.status = 'failed'
                state.error = {message : action.payload as string}
            })
    }
})

export const { setUser, setStatus, setAuthError } = authSlice.actions;

export const selectUser = (state: RootState) => state.auth.user

export const selectAuthStatus = (state: RootState) => state.auth.status;

export const selectAuthError = (state:RootState) => state.auth.error

export default authSlice.reducer

**But I am not able to leverage the redux middleware without the useEffect here: **

import { useEffect } from "react";
import { useAppDispatch, useAuthStatus } from "~/hooks/reduxHooks";
import { Router } from "~/router/Router";
import { setStatus } from "~/slices/authSlice";

function Main() {
  const dispatch = useAppDispatch();
  const status = useAuthStatus()

  // needs to be worked on
  useEffect(() => {
      dispatch(setStatus('initialCheck'))
  }, []);

  return (
    <main className="font-jakarta">
      <Router />
    </main>
  );
}

export default Main;

Would appreciate any help on this

[markerikson]

I don't think I understand what the actual question is.

• What specifically are you trying to accomplish?
• What do you expect to happen?
• What is actually happening (or not happening) instead? (ie, what's broken?)
• What "load error" are you referring to?

[gautamsarawagi]

Due to which I think I might be doing something wrong

[markerikson]

I think you may be confused. The listener middleware only ever reacts to dispatched actions. If there's no action dispatched, the middleware code never has anything to respond to.

[gautamsarawagi]

Oh okay I got it!!

I thought that it would be based on the states but it is on the events. I suppose I have to use the sideEffect to manage that.

Thanks

[markerikson]

Yeah, the middleware will use your predicate function to do comparisons to decide if it should run the effect function... but it only does that check after each action is dispatched.

[gautamsarawagi]

Thanks a lot @markerikson for clearing the doubts.

Also really appreciate the activeness of the community !!