Why isn't this redux action promise resolving?

Question

I have a redux action that returns a promise, so that the ui can respond accordingly based upon the result. This action sends a request to the backend, and when it gets a successful response from the server, it resolves.

redux action:

export const preauthorizePayment = (amount, connectedAccountId, customerId) => {
    console.log("action reached")
    return (dispatch) => {
        dispatch({ type: types.UPDATING })
        return new Promise((reject, resolve) => {
            console.log("promise reached")
            axios.get(PRE_AUTH_ENDPOINT, {
                params: {
                    amount: amount,
                    customerId: customerId,
                    connectedAccountId: connectedAccountId
                }
            })
                .then(res => {
                    console.log("then reached...")
                    if (res.data.result == 'success') {
                        dispatch({ type: types.UPDATE_SUCCESS });
                        console.log("if reached...");
                        return resolve();
                    } else {
                        console.log("else reached...")
                        console.log(JSON.stringify(res))
                        dispatch({
                            type: types.UPDATE_FAIL,
                            info: res.data.errorInfo,
                            errorCode: res.data.errorCode
                        })
                        return reject()
                    }
                })
                .catch(err => {
                    dispatch({ type: types.UPDATE_FAIL, errorInfo: err })
                    return reject()
                })
        })
    }
}

the UI piece looks like:

props.preauthorizePayment(amount, connectedAccountId, customerId)
  .then(() => {
    console.log("pre-auth then reached")
    // pre-auth success
    setCheckInModal(false)
    props.checkIn(props.evnt.id, props.role)
  })
  .catch(err => setCheckInModal(true))

What im experiencing is that everything is working properly up until the resolve() portion of the redux action. din the if block of the redux action's then(), the dispatch gets fired, the log fires, but it doesn't resolve. The UI piece's then() does not execute, no log, nothing. initially I didnt have the return keyword in the resolve line, and once I added it, it worked once. but then it stopped.

Whats going on?

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Oct 05 '20 at 21:55
There's no need to wrap the `axios.get...` code in `new Promise`, since `axios.get` already returns a Promise - this is a classic Promise anti-pattern - however, the code should still work. — Jaromanda X, Oct 05 '20 at 22:00
the actual issue is you resolve when you should reject and you reject when you should resolve ... since the first callback in a Promise executor is resolve and teh second is reject ... you've named resolve reject, and reject resolve - the name of the function doesn't change what it does - if you hadn't used the anti-pattern, you would've been fine — Jaromanda X, Oct 05 '20 at 22:00

Why isn't this redux action promise resolving?

0 Answers0