Redux store render multiples state. Is it normal? - reactjs

Question

I received state nested in state and it has many states rendered.
You see from my photo below.
Here is my LoginReducer
import {
LOGIN_SUCCESS,
LOGIN_FAIL,
USER_LOADED,
AUTH_ERROR
} from '../actions/typeName';
const initialState = {
token: localStorage.getItem('token'),
isAuthenticated: null,
loading: true,
user: null
}
const loginReducer = (state = initialState, action) => {
const {
type,
payload
} = action;
switch (type) {
case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: true,
user: payload
};
case LOGIN_SUCCESS:
localStorage.setItem('token', payload.token)
return {
...state,
isAuthenticated: true,
loading: false
}
case AUTH_ERROR:
case LOGIN_FAIL:
localStorage.removeItem('token')
return {
...state,
token: null,
isAuthenticated: false,
loading: true
}
default:
return {
state
}
}
}
export default loginReducer;
And here is myaction.
export const LoginAction = (email, password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
}
const body = JSON.stringify({email, password});
try {
const res = await axios.post('/api/admin/login', body, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
});
dispatch(loadUser());
}catch(err){
const errors = err.response.data.errors;
dispatch({
type: LOGIN_FAIL,
});
if(errors) {
errors.forEach(error => {
dispatch(NotificationAction(error.msg, 'error'));
})
}
}
}
If it is not normal and how to prevent this? Thank you so much.

Answer 1

The default case is not handled correctly in your reducer. Use
switch (type) {
...
default:
return state;
}
instead. If you return { state } the current state will be wrapped in a new object with an attribute state, that's what you see in the inspector.

Answer 2

Its not normal, usually we will get state and the reducers defined in it. In your case
state with the following reducers
loginReducer
notificationReducer
listUsersReducer and so on.
Can u please provide the respective action file. I think the way u are passing inside the switch() should be action.type instead of type itself.