将Redux API调用中的错误作为Toa​​st处理

Question

因此，我正在尝试找出从Redux触发API调用时显示Toast错误和成功函数的最佳方法。

我的思路：为API调用创建操作。如果成功，那么我希望屏幕切换到主屏幕。如果失败，则在Toast中显示消息。

这是我的一些动作：

export function getTokenAPI(username, password) {
  return async function action(dispatch) {
    try {
      dispatch({ type: t.AUTH_GET_TOKEN });
      dispatch(setLoading(true));

      const { data } = await API.authGetToken(username, password);
      const { success } = data;


      if (success) {
        const { access_token, refresh_token } = data;

        dispatch(setAccessToken(access_token));

        dispatch(setRefreshToken(refresh_token));

        await dispatch(setLoading(false));
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(errorMessage);
      }
    } catch (e) {
      dispatch(setError(e.message));
      dispatch(setLoading(false));
    }
  };
}

setError操作将error键设置为true并设置errorMessage。这是我的屏幕外观：

import React from 'react';

import { Container, View, Toast } from 'native-base';
import styles from './styles';

import { connect } from 'react-redux';
import { authActions } from '_ducks/auth';

const LoginScreen = props => {
  const { getToken, navigation } = props;
  const { navigate } = navigation;

  const navigateToHome = () => navigate('Home');

  const handleLogin = async () => {
    const { error, errorMessage } = props;
    await getToken('sample', 'pass123');
    if (error) {
      Toast.show({
        text: errorMessage,
        buttonText: 'kay',
      });
    } else {
      navigateToHome();
    }
  };

  return (
    <Container>
      <View style={styles.container}>
        <LoginButton onPress={handleLogin} />
      </View>
    </Container>
  );
};

const mapDispatchToProps = dispatch => ({
  getToken: () => dispatch(authActions.getTokenAPI()),
});

const mapStateToProps = state => ({
  isLoading: state.authReducer.isLoading,
  error: state.authReducer.error,
  errorMessage: state.authReducer.errorMessage,
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LoginScreen);

因此，如果有错误，请显示吐司。如果成功，请导航到主屏幕。本质上，error的速度true不足以使handleLogin中的检查正常工作。

对模式或流程有何建议？我应该在这里使用useEffect钩子吗？