如何異步/等待redux-thunk操作？

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

異步/的await方法

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

這將允許你指定唯一一個採取行動的錯誤的數組。