redux-thunk क्रियाओं को async/await कैसे करें?

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

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

हालांकि, जब मैं async साथ component.js कोड लिखने/की तरह नीचे मैं इस त्रुटि मिलती है इंतजार:

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

घटक.जेएस

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

मैं getLoginStatus() का इंतजार कैसे करूं और फिर शेष बयानों को निष्पादित करूं? सब कुछ का उपयोग करते समय काफी अच्छी तरह से काम करता है .then()। मुझे संदेह है कि मेरे async/प्रतीक्षा कार्यान्वयन में कुछ याद आ रही है। इसे समझने की कोशिश कर रहा है।

Answer 1

Possible Unhandled Promise Rejection

ऐसा लगता है कि आप अपने वादे पर .catch(error => {}); खो रहे हैं। इस प्रयास करें:

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

वादा दृष्टिकोण

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); 
    }; 
} 

async/इंतजार दृष्टिकोण

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); 
    } 
    } 
} 

मध्यम पद समझा से संदर्भित Redux साथ async/इंतजार: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

Answer 3

रीमिक्सिंग Aspen's answer।

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, 
      }, 
     ], 
     }) 
    } 
    } 
} 

 

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 
    } 
} 

यह आपको एक कार्रवाई के लिए अद्वितीय त्रुटियों की एक सरणी निर्दिष्ट करने के लिए अनुमति देगा।