reactjs - react - ¿Cómo asincar/esperar acciones redux-thunk?

redux thunk vs saga

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

Sin embargo, cuando escribo el código de component.js con async / await como abajo, aparece este error:

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

¿Cómo espero un getLoginStatus () y luego ejecuto el resto de las sentencias? Todo funciona bastante bien cuando se usa .then (). Dudo que falte algo en mi implementación async / await. tratando de resolver eso

Answer 1

Posible rechazo de la promesa no controlada

Parece que te estás perdiendo el .catch(error => {}); en tu promesa Prueba esto:

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

Remezclando la respuesta de Aspen .

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

Esto le permitirá especificar una serie de errores únicos para una acción.

Answer 3

El enfoque de la promesa

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

El enfoque asíncrono / espera.

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

Referenciado en la publicación Medium explicando Redux con async / await: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2