如何异步/等待 redux-thunk 动作？

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

组件 js

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

然而，当我使用异步/等待方式编写 compent.js 代码时，如下所示，我得到了这个错误:

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

组件 js

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

如何等待 getLoginStatus ()并执行其余语句？ 使用时一切都运行良好。那么(())。我怀疑我的异步/等待实现中缺少了什么。想弄清楚。

119698 次浏览
小开

可能未经处理的拒绝承诺

看来你错过了 .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());
}) ;
}
小开

无极之路

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

引用自 Medium 文章，解释了使用异步/等待的 Redux: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

小开

混音 阿斯彭的回答。

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

这将允许您指定操作所特有的错误数组。

小开

异步的另一个混合等待 reducx/thunk。我只是觉得在编写 Thunk(a function that wraps an expression to delay its evaluation ~ 再来一次)时，这个更易于维护和阅读

Actions.js

import axios from 'axios'
export const FETCHING_DATA = 'FETCHING_DATA'
export const SET_SOME_DATA = 'SET_SOME_DATA'


export const myAction = url => {
return dispatch => {
dispatch({
type: FETCHING_DATA,
fetching: true
})
getSomeAsyncData(dispatch, url)
}
}


async function getSomeAsyncData(dispatch, url) {
try {
const data = await axios.get(url).then(res => res.data)
dispatch({
type: SET_SOME_DATA,
data: data
})
} catch (err) {
dispatch({
type: SET_SOME_DATA,
data: null
})
}
dispatch({
type: FETCHING_DATA,
fetching: false
})
}

减速器

import { FETCHING_DATA, SET_SOME_DATA } from './actions'


export const fetching = (state = null, action) => {
switch (action.type) {
case FETCHING_DATA:
return action.fetching
default:
return state
}
}


export const data = (state = null, action) => {
switch (action.type) {
case SET_SOME_DATA:
return action.data
default:
return state
}
}
小开

使用调度(this.pros.splashAction.getLoginStatus ())而不是 this.pros. (splashAction.getLoginStatus ())


提交答案