비동기/대기중인 툰크 작업 방법

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

, 내가 비동기로 component.js 코드를 작성할 때/나는이 오류를 얻을 아래처럼 기다리고 :

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

어떻게 getLoginStatus()를 기다리고 나머지 명령문을 실행합니까? .then()를 사용하면 모든 것이 잘 작동합니다. 내 비동기/기다리는 구현에 뭔가 빠져 있음을 의심합니다. 그걸 알아 내려고 했어.

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

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

가 설명하는 중간 게시물에서 언급 된 비동기/await를 접근 돌아 오는와 비동기/await를 : https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

Answer 3

리믹스 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 
    } 
} 

이

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

은 작업에 고유 한 오류의 배열을 지정할 수 있습니다.