Estoy tratando de crear una función que envíe una solicitud de préstamo a varios correos electrónicos, pero tengo un problema con la acción redux y no recibí los datos.
Aquí está el código base de action.js:
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); }); };y aquí está mi función de botón que envía datos:
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) => { } }Aquí está mi console.log (recipientPayloadToUpdate):
recipientPayloadToUpdate: 0: email: "nnhan3640@gmail.com" id: "f6625773-79c6-48c4-bc16-7c63acb5cc93" initiatorMessage: "" relationship: "parent"y console.log en acción no está definido.
¿Alguien sabe por qué tengo indefinido?
updateUserLoanRecipientRequest desestructura a partir de un argumento en forma de objeto con una propiedad recipientRequestDetails . Está pasando un objeto sin esa propiedad.
Es probable que quisieras pasar
updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})Además, es muy probable que haya querido enviar esa acción:
const dispatch = useDispatch(); const sendNow = () => { // ... dispatch(updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})).then(...) Si está usando connect aquí, técnicamente funciona (siempre que esté usando updateUserLoanRecipientRequest de props ), pero realmente me gustaría alentarlo a usar los ganchos react-redux (en este caso, useDispatch en lugar de connect . connect es bastante mucho una API heredada para la compatibilidad con los componentes de la clase en este punto.
Además, quiero señalar que generalmente está escribiendo un estilo muy desactualizado de Redux aquí que ya no estamos enseñando para uso en producción. Modern Redux no usa switch..case reducer, ACTION_TYPEs, lógica reductora inmutable de connect .
Recomiendo encarecidamente seguir el tutorial oficial de Redux para ponerse al día con las prácticas modernas: https://redux.js.org/tutorials/essentials/part-1-overview-concepts