useDispatch () и useSelector () не мешают в хуках реагировать нативно?

Question

Я перехожу с классов на крючки в реагирующем нативе, но сталкиваюсь с некоторыми проблемами, используя приставку с крючками.

Моя работа до сих пор

Вход. 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;

Я отправляю логин действие, когда пользователь нажимает кнопку логина. Но проблема в том, что приложение застревает здесь, а действие не завершается и всегда остается auth_loading

мое действие при входе в систему

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));
    }
  };
};

Мой редуктор

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;
  }
};

Правильно ли я использую крючки?

Или как ждать после отправки действия на крючок. ?

Помощь будет оценена.

Спасибо