useDispatch() and useSelector() are not wroking in hooks react native? - react-native

Question

I am moving from classes to hooks in react native but facing some issues using redux with hooks.
My work till now
Login.js
const Login = props => {
const {navigation} = props;
const dispatch = useDispatch();
const {success, loading, error} = useSelector(state => state.auth);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onLoginPress = async () => {
await dispatch(login(email, password)); //here VSCode give hints await is useless ? Why ? how to use await then ?
if (success) {
navigation.navigate('Home');
} else {
alert(error || 'Invalid Credentials. Please Try again');
}
};
//other code
export default Login;
I am dispatching login action when user presses login button. But problem is app stucks here and action doesn't complete and always remains auth_loading
my login action
export const login = (email, pass) => {
return async dispatch => {
dispatch(authLoading());
try {
const res = await firebaseService
.auth()
.signInWithEmailAndPassword(email, pass); //here app action stucks
dispatch(loginSuccess(res));
} catch (err) {
dispatch(authFailed(err.message));
}
};
};
My reducer
import {
LOGIN_EMAIL_CHANGED,
LOGIN_PASS_CHANGED,
LOGIN_SUCCESS,
REGISER_SUCCESS,
} from '../types';
import {AUTH_FAILED, AUTH_LOADING} from '../actions/AuthActions';
const initialState = {
loginEmail: null,
loginPass: null,
loading: false,
success: false,
user: null,
error: '',
authenticated: false,
};
export const AuthReducer = (state = initialState, action) => {
switch (action.type) {
case LOGIN_EMAIL_CHANGED:
return {
...state,
loginEmail: action.payload,
};
case LOGIN_PASS_CHANGED:
return {
...state,
loginPass: action.payload,
};
case AUTH_LOADING: {
return {
...state,
success: false,
loading: true,
error: '',
};
}
case AUTH_FAILED: {
return {
...state,
loading: false,
success: false,
error: action.payload,
};
}
case LOGIN_SUCCESS: {
return {
...state,
user: action.payload,
loading: false,
success: true,
error: null,
};
}
case REGISER_SUCCESS: {
return {
...state,
user: action.payload,
loading: false,
success: true,
error: null,
};
}
default:
return state;
}
};
Am i using hooks in right way ?
Or how to await after dispatching action in hook. ?
Help will be appreciated.
Thanks