1

我正在从类转移到反应原生的钩子，但在使用带有钩子的 redux 时遇到了一些问题。

我的工作到现在

登录.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;
  }
};

我是否以正确的方式使用钩子？

或者如何在钩子中调度动作后等待。?

帮助将不胜感激。

谢谢

4

0 回答 0