I am trying to create a function that send a loan request to multiple emails but having a problem with redux action did not receive the data.
Here is action.js code base:
export const updateUserLoanRecipientRequest = ({ recipientRequestDetails }) => (
dispatch,
getState,
) => {
const state = getState();
const userAuthToken = selectUserAuthToken(state);
const currentLoanRequest = selectCurrentLoanRequest(state);
const joinedLoanDetails = {
...currentLoanRequest.recipientRequestDetails,
...recipientRequestDetails,
};
console.log("recipientRequestDetails: ", recipientRequestDetails)
return updateLoanRequest({
userAuthToken,
loanDetails: { ...currentLoanRequest, recipientRequestDetails: joinedLoanDetails },
})
.then(data => {
dispatch({ type: UPDATE_LOAN_REQUEST, payload: data });
return data;
})
.catch(error => {
console.log("ERROR UPDATING USER LOAN");
triggerGenericNotification(dispatch, error);
});
};
and here is my button function that send data:
const [inputFields, setInputFields] = useState([
{ id: uuidv4(), relationship: 'parent', initiatorMessage: '', email: '' }]);
const sendNow = () => {
const recipientPayloadToUpdate = inputFields?.map(i => {
return i
})
console.log("recipientPayloadToUpdate: ",
recipientPayloadToUpdate);
updateUserLoanRecipientRequest(recipientPayloadToUpdate).then((res) => {
}
}
Here is my console.log(recipientPayloadToUpdate):
recipientPayloadToUpdate:
0:
email: "nnhan3640@gmail.com"
id: "f6625773-79c6-48c4-bc16-7c63acb5cc93"
initiatorMessage: ""
relationship: "parent"
and console.log in action is undefined.
Anyone know why I got undefined?
updateUserLoanRecipientRequest destructures from an argument in the form of an object with a property recipientRequestDetails.
You are passing in an object without that property.
It is likely that you wanted to pass in
updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})
Also, it is very likely that you meant to dispatch that action:
const dispatch = useDispatch();
const sendNow = () => {
// ...
dispatch(updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})).then(...)
If you are using connect here, that does technically work (as long as you are using updateUserLoanRecipientRequest from props), but I really would want to encourage you to use the react-redux hooks (in this case useDispatch instead of connect. connect is pretty much a legacy api for compatibility with class components at this point.
Also, I want to point out that you are generally writing a very outdated style of Redux here that we are not teaching for production use any more. Modern Redux does not use switch..case reducer, ACTION_TYPEs, immutable reducer logic of connect.
I would highly recommend going through the official Redux tutorial to get up to speed with modern practices: https://redux.js.org/tutorials/essentials/part-1-overview-concepts