While developing a redux reducer that manages user login and logout, I encountered an issue with the logout functionality. The login process is functioning properly, but upon attempting to logout, I received the following error:
loginReducer.js:60 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at loginAPIReducer
This is how my current code is structured:
//logouttypes:
export const LOGOUT_REQUEST = "LOGOUT_REQUEST";
export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
export const LOGOUT_FAILURE = "LOGOUT_FAILURE";
//logoutactions:
import {LOGOUT_REQUEST, LOGOUT_SUCCESS, LOGOUT_FAILURE } from './logoutTypes'
export const logoutRequest = () => {
return{
type: LOGOUT_REQUEST
}
}
export const logoutSucces = response => {
return{
type: LOGOUT_SUCCESS,
payload: response
}
}
export const logoutFailure = error => {
return{
type: LOGOUT_FAILURE,
payload: error
}
}
// reducer:
export const startLogout = () =>{
return dispatch => {
dispatch(logoutRequest)
.then(res => {
dispatch(logoutSucces)
})
.catch(error => {
dispatch(logoutFailure(error))
})
}
}
const loginAPIReducer = (state = initialLoginState, action) => {
console.log(action.type)
switch(action.type){
case LOGIN_REQUEST:
return{
...state,
loading: true
}
case LOGIN_SUCCESS:
return{
loading: false,
user: action.payload,
error: '',
logedIn: true
}
case LOGIN_FAILURE:
return{
loading: false,
user: '',
logedIn: false,
error: action.payload
}
case LOGOUT_REQUEST:
return{
...state,
loading: true
}
case LOGOUT_SUCCESS:
return{
loading: false,
user: '',
logedIn: false,
error: ''
}
case LOGOUT_FAILURE:
return{
loading: false,
error: action.payload
}
default:
return state;
}
}
export default loginAPIReducer;
The startLogout function is triggered in the navigation bar:
<Button variant="outline-success" onClick={startLogout}>Log out</Button>
The reducer is properly connected to the store. It's puzzling that the login functionality works without issues while the corresponding logout feature encounters errors as mentioned above.
Your assistance is greatly appreciated!