TypeError: undefined is not an object (evaluating 'loginState.isLoading') - react-native

Question

I am trying to authenticate a login using Async Storage with React Native. Every time I click on the SignUp button in my simulator it throws me a type error saying "TypeError: undefined is not an object (evaluating 'loginState.isLoading')". I believe the problem is how I'm defining loginState. Here is the page where I define loginState below:
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet,Component, Text,TouchableWithoutFeedback, View,Image,SafeAreaView, Button, ScrollView, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import MainTabScreen from './screens/MainTab';
import {DrawerContent} from './screens/DrawerContent';
import RootStackScreen from './screens/RootStack'
import { useEffect } from 'react';
//import { firebaseConfig } from './screens/config';
import { AuthContext } from './components/context';
import AsyncStorage from '#react-native-async-storage/async-storage';
const Drawer = createDrawerNavigator();
function App() {
// const [isLoading, setIsLoading] = React.useState(true);
// const [userToken, setUserToken] = React.useState(null);
const initialLoginState = {
isLoading: true,
userName: null,
userToken: null,
};
const loginReducer = (prevState, action) => {
switch( action.type ) {
case 'RETRIEVE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGIN':
return {
...prevState,
userName: action.id,
userToken: action.token,
isLoading: false,
};
case 'LOGOUT':
return {
...prevState,
userName: null,
userToken: null,
isLoading: false,
};
case 'REGISTER':
return {
...prevState,
userName: action.id,
userToken: action.token,
isLoading: false,
};
}
};
const [loginState, dispatch] = React.useReducer(loginReducer, initialLoginState);
const authContext = React.useMemo(() => ({
signIn: (userName,password) =>{
// setUserToken('tony');
// setIsLoading(false);
let userToken;
userToken = null;
if (userName == 'user' && password == 'pass'){
userToken = 'lexi';
}
dispatch({type:'LOGIN,',id:userName, token:userToken});
},
signOut: () => {
// setUserToken(null);
// setIsLoading(false);
dispatch({type:'LOGOUT'});
},
signUp: () => {
setUserToken('tony');
setIsLoading(false);
},
}),[])
useEffect(() => {
setTimeout(() => {
// setIsLoading(false);
dispatch({type:'RETRIEVE_TOKEN',token:'mario'});
},1000);
},[]);
if (loginState.isLoading == true)
{
return(
<View style = {{flex:1,justifyContent:'center',alignItems:'center'}}>
<ActivityIndicator size = "large"/>
</View>
);
}
return (
<AuthContext.Provider value = {authContext}>
<NavigationContainer>
{loginState.userToken !== null ? (
<Drawer.Navigator drawerContent = {props => <DrawerContent {... props}/>}>
<Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
</Drawer.Navigator>
)
:
<RootStackScreen/>
}
</NavigationContainer>
</AuthContext.Provider>
);
}
export default App;

Answer 1

Found the error. I changed:
dispatch({type:'LOGIN,',id:userName, token:userToken});
To:
dispatch({type:'LOGIN',id:userName, token:userToken});