CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Nhan Nguyen
Nhan Nguyen

Reputation: 405

action redux is undefined, did not get the data

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: "[email protected]"
id: "f6625773-79c6-48c4-bc16-7c63acb5cc93"
initiatorMessage: ""
relationship: "parent"

and console.log in action is undefined.

Anyone know why I got undefined?

Upvotes: 0

Views: 375

Answers (1)

phry
phry

Reputation: 44078

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

Upvotes: 1

Related Questions