using async/await with redux thunk - async-await

Question

i'm new to redux/react and trying to put together a login page. But for some reason the code within the async parameters are not running. I was trying to write it so that I don't need to put in a bunch of .then statements. My code is below.
export function signIn (email, password) {
console.log('trying to login');
return async function (dispatch) {
const error = validateCredentials(email, password);
if (error) {
return error;
}
try {
console.log('gather credentials');
const geoipjson = await geoip();
console.log(geoipjson);
const ip = geoipjson.ip;
console.log(ip);
const country = geoipjson.country_name;
console.log(country);
const fp = await getFingerprint();
console.log(fp);
const res = await authenticateUser(email, password, ip, country, fp);
if (!res.jwt) {
return res;
}
const update_error = await updateLoginStamp(res.jwt);
if (update_error) {
return update_error;
}
setCookie("jwt", res.jwt);
console.log('user authenticated');
dispatch({type: USER_AUTHENTICATED});
history.push('/');
return null;
} catch (error) {
console.log('authentication error');
dispatch({type: AUTHENTICATION_ERROR, error});
return error;
}
}

Answer 1

Is it logging an error at the beginning? Also, can you post the validateCredentials code?
const error = validateCredentials(email, password);
if (error) {
console.log('Error: ', error);
return error;
}

Answer 2

Actually, I figured out the solution with some help from a blog entry. I realized the code after,
return async function (dispatch) { ... }
wasn't being called. I was calling this function from the main app.js, but needed to "dispatch" from the component making the call, to make use of the middleware thunk. I didn't understand the whole answer but it has to do with binding to an actioncreator. The blog here handled it pretty nicely, the best solution I could find.
import {connect} from "react-redux";
import {action1, action2} from "myActions";
const MyComponent = (props) => (
<div>
<button onClick={props.action1}>Do first action</button>
<button onClick={props.action2}>Do second action</button>
</div>
)
// Passing an object full of actions will automatically run each action
// through the bindActionCreators utility, and turn them into props
export default connect(null, {action1, action2})(MyComponent);
the full explanation and the blog entry can be found here. This solved a huge problem for me and was done in an excellent way, in my opinion.