Итак, я пытаюсь найти лучший способ отображения функции ошибки и успеха Toast
, когда вызов API запускается из-за редукса.
Мое мышление: создайте действие для вызова 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
хук здесь?