Обработка ошибок с помощью redux-thunk, react native

#reactjs #react-native #redux #react-redux #redux-thunk

#reactjs #react-native #redux #react-redux #redux-thunk

Вопрос:

Я использую настройку redux в своем приложении react-native с использованием redux-thunk. это простое действие входа в систему

 export const doLogin=(request, onSuccess, onError)=>{
return dispatch=>{
    console.log(request)
    axios.post(`/AppUser/LoginValidation`, request).then(res=>{
        console.log(res.data)
        if(res.data.isSuccess=== true){
            dispatch({
                type:LOGIN,
                payload:{
                     auth_token: res.data.authToken,
                     responseResult: res.data.responseResult,
                     loggedIn: true
                }
            })
            onSuccess amp;amp; onSuccess();
        }else{
            dispatch({
                type: ERROR,
                payload: res.data.message
            })
            onError amp;amp; onError();
        }
    })
    .catch(err=>{
        console.log('err',err )
    })
}
  

}

и таким образом я использовал приведенный выше код во внешнем интерфейсе:

  props.doLogin(data,()=>{
        action.setErrors({password: props.errorMsg})
        // action.resetForm();
        // setMobileno(null)
        props.navigation.navigate('FLayout', { screen:'Home' })
    })
  

он перенаправляет меня, если идентификатор входа и пароль верны. если я введу неверный идентификатор и пароль, он все равно перенаправит меня на домашнюю страницу вместо того, чтобы показывать мне сообщение.

Ответ №1:

Похоже, вы не передаете метод обратного вызова для обработки ошибок. Попробуйте это:

 const onSuccess = () => {
  props.navigation.navigate('FLayout', { screen:'Home' })
}

const onError = () => {
  action.setErrors({password: props.errorMsg})
  // action.resetForm();
  // setMobileno(null)
}

props.doLogin(data, onSuccess, onError)
  

Комментарии:

1. Я нашел решение другим способом, мне нужно написать два обратных вызова в разделе моего интерфейсного приложения, например, props.doLogin(data,()=>{ action . setErrors({пароль: props.ErrorMsg}) // action.resetForm(); // setMobileno(null) props.navigation.navigate(‘FLayout’, {экран:’Главная’ }) },()=>{ console.log(«ошибка обратного вызова»)})

Ответ №2:

Я нашел решение другим способом, мне нужно написать два обратных вызова в разделе моего интерфейсного приложения, например,

 props.doLogin(data,()=>{
    
    // action.resetForm();
    // setMobileno(null)
    props.navigation.navigate('FLayout', { screen:'Home' })
},
()=>{
    action.setErrors({password: props.errorMsg})
    console.log("another callback for error handle")
 })
  

Комментарии:

1. Это фактически та же функциональность, что и мой ответ. Я просто использовал выражения функций в отличие от анонимных функций, поэтому их было немного легче читать. Рад, что вы смогли разобраться в этом самостоятельно!

2. Да. Спасибо и вам за помощь!