redux-thunk eylemlerini nasıl async/bekliyor?

Question

action.js

export function getLoginStatus() { 
    return async(dispatch) => { 
    let token = await getOAuthToken(); 
    let success = await verifyToken(token); 
    if (success == true) { 
     dispatch(loginStatus(success)); 
    } else { 
     console.log("Success: False"); 
     console.log("Token mismatch"); 
    } 
    return success; 
    } 
} 

component.js

Ancak

componentDidMount() { 
    this.props.dispatch(splashAction.getLoginStatus()) 
     .then((success) => { 
     if (success == true) { 
      Actions.counter() 
     } else { 
      console.log("Login not successfull"); 
     } 
    }); 
    } 

, ben zaman uyumsuz ile component.js kod yazarken/Bu hatayı başlaması için aşağıdaki gibi bekliyor:

Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating 'this.props.dispatch(splashAction.getLoginStatus())')

component.js

async componentDidMount() { 
    let success = await this.props.dispatch(splashAction.getLoginStatus()); 
    if (success == true) { 
     Actions.counter() 
    } else { 
     console.log("Login not successfull"); 
    } 
    } 

Bir getLoginStatus() öğesini nasıl beklerim ve sonra da ifadelerin geri kalanını yürütürüm? .then() kullanırken her şey gayet iyi çalışıyor. Async/appatement uygulamasında bir şey eksik olduğundan şüphe duyuyorum. bunu anlamaya çalışıyorum.

Answer 1

Possible Unhandled Promise Rejection

Sözünüzün üzerinde .catch(error => {}); eksik gibi görünüyor. Bu deneyin:

componentDidMount() { 
    this.props.dispatch(splashAction.getLoginStatus()) 
     .then((success) => { 
      if (success == true) { 
       Actions.counter() 
      } else { 
       console.log("Login not successfull"); 
      } 
     }) 
     .catch(err => { 
      console.error(err.getMessage()); 
     }) ; 
} 

Answer 2

Promise yaklaşımı

export default function createUser(params) { 
    const request = axios.post('http://www..., params); 

    return (dispatch) => { 
    function onSuccess(success) { 
     dispatch({ type: CREATE_USER, payload: success }); 
     return success; 
    } 
    function onError(error) { 
     dispatch({ type: ERROR_GENERATED, error }); 
     return error; 
    } 
    request.then(success => onSuccess, error => onError); 
    }; 
} 

export default function createUser(params) { 
    return async dispatch => { 
    function onSuccess(success) { 
     dispatch({ type: CREATE_USER, payload: success }); 
     return success; 
    } 
    function onError(error) { 
     dispatch({ type: ERROR_GENERATED, error }); 
     return error; 
    } 
    try { 
     const success = await axios.post('http://www..., params); 
     return onSuccess(success); 
    } catch (error) { 
     return onError(error); 
    } 
    } 
} 

açıklayan Orta görevinden Başvurulan zaman uyumsuz/bekliyoruz yaklaşım Redux ile zaman uyumsuz/bekliyoruz: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

Answer 3

Remixing Aspen's answer.

 

import * as types from '../actions/types' 

const initialErrorsState = [] 

export default (state = initialErrorsState, { type, payload }) => { 
    switch (type) { 
    case types.UPDATE_ERRORS: 
     return payload.map(error => { 
     return { 
      code: error.code, 
      message: error.message, 
     } 
     }) 

    default: 
     return state 
    } 
} 

Bu

import axios from 'axios' 

import * as types from './types' 

export function fetchUsers() { 
    return async dispatch => { 
    try { 
     const users = await axios 
     .get(`https://jsonplaceholder.typicode.com/users`) 
     .then(res => res.data) 

     dispatch({ 
     type: types.FETCH_USERS, 
     payload: users, 
     }) 
    } catch (err) { 
     dispatch({ 
     type: types.UPDATE_ERRORS, 
     payload: [ 
      { 
      code: 735, 
      message: err.message, 
      }, 
     ], 
     }) 
    } 
    } 
} 

bir eylem özgü hataların bir dizi belirtmek sağlayacaktır. Bu kalıbı işe yaradın mı hiç?