Redux-Loop dispatch not returning promise from reducer

Question

I'm using v2.2.2 of redux-loop to handle my side-effects from a server call.

Having dispactched an action from my component like so:

checkStatus() {
    const user = Utils.toJS(this.props.user);
    this.props.dispatch(UserActions.getUserData(user._id))
    .then((res) => {
        console.log(res)
    }
}

I expect my promise to come back from the dispatch, but it always returns

[]

My action looks like so...

export async function getUserData(data) {
return await getUser(data)
    .then((res) => ({type: USER_GET_SUCCESS, payload: res}))
    .catch((err) => ({type: USER_GET_FAILURE, payload: err}));
}

where getUser looks like:

export async function getUser(data) {
    return await get(`/users/${data}`)
}

and gets caught in the reducer and saved to the state like so:

case USER_GET_SUCCESS:
  return state
  .set('user', fromJS(action.payload.data));

The data always comes back properly but for some reason never gets returned back as a promise to the original dispatch.

Any suggestions would be amazing!

Answer 1

I think part of the issue is mixing your promise .then code in with the async/await calls within a single function. Try this instead:

export async function getUserData(data) {
  try {
    const result = await getUser(data);
    return { type: USER_GET_SUCCESS, payload: result };
  } catch (err) {
    return {type: USER_GET_FAILURE, payload: err};
  }
}