Getting response data from post request when using axios - reactjs

Question

I'm trying to integrate the shippo api into a project that I am working on. I'm creating a post api request in my paymentActions.js document that is accessed on my PlaceOrderScreen.js. Currently, I am need to get the response sent from the api in my backend to my PlaceOrderScreen.js. In paymentActions.js, data from dispatch({ type: PAYMENT_SUCCESS, payload: data }) is returning my necessary response. How can I get this response in my PlaceOrderScreen.js? I was going to try to use useEffect(), but it was giving me an error when I was trying to put that within const handleSubmit.... I would really appreciate any help or advice. Thank you!
paymentActions.js
import Axios from 'axios';
import {
PAYMENT_REQUEST,
PAYMENT_SUCCESS,
PAYMENT_FAIL,
} from '../constants/paymentConstants';
import { BASE_URL } from '../constants/app.constants';
export const paymentInfo = (paymentMethodType, currency, userId) => async (dispatch) => {
dispatch({ type: PAYMENT_REQUEST, payload: paymentMethodType, currency, userId});
try {
const { data } = await Axios.post( 'api/stripe/pay', {
paymentMethodType,
currency,
userId,
})
dispatch({ type: PAYMENT_SUCCESS, payload: data })
}
catch (error) {
dispatch({
type: PAYMENT_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
I need to get data from dispatch({ type: PAYMENT_SUCCESS, payload: data }) (the response) within:
const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}
const paymentMethodType = 'card';
const currency = 'usd';
const {error: backendError, clientSecret} = dispatch(paymentInfo(paymentMethodType, currency, userId));
if (backendError) {
//addMessage(backendError.message);
console.log(backendError)
return;
}
console.log('Client secret returned')
console.log(clientSecret)
const {error: stripeError, paymentIntent} = await stripe.confirmCardPayment(clientSecret,
{
payment_method: {
card: elements.getElement(CardElement),
billing_details: {
name: 'Jenny Rosen',
},
},
},
);
};
in my PlaceOrderScreen.js
paymentReducers.js
import {
PAYMENT_REQUEST,
PAYMENT_SUCCESS,
PAYMENT_FAIL,
} from '../constants/paymentConstants';
export const paymentInfoReducer = (state = {info:[]}, action) => {
switch (action.type) {
case PAYMENT_REQUEST:
return { ...state, loading: true };
case PAYMENT_SUCCESS:
return { ...state, loading: false, info: action.payload };
case PAYMENT_FAIL:
return { ...state, loading: false, error: action.payload };
default:
return state;
}
};

Answer 1

Inside your reducer, you will add a key in the PAYMENT_REQUEST case. here we got the data that will come back from that request. That's what you want. then you will use it similar to your usage of the info and error key inside the PAYMENT_SUCCESS and PAYMENT_FAIL case.
import {
PAYMENT_REQUEST,
PAYMENT_SUCCESS,
PAYMENT_FAIL,
} from '../constants/paymentConstants';
export const paymentInfoReducer = (state = {info:[]}, action) => {
switch (action.type) {
case PAYMENT_REQUEST:
return { ...state, loading: true, success: action.payload };
case PAYMENT_SUCCESS:
return { ...state, loading: false, info: action.payload };
case PAYMENT_FAIL:
return { ...state, loading: false, error: action.payload };
default:
return state;
}
};