Tengo una API que publica datos en el servidor y quiero obtener esa respuesta en otro archivo. esta es una función en el archivo action.js . Quiero devolver la respuesta de esta promesa a otro componente donde se llama.
export const saveOrder = data => dispatch => { fetch(`${baseUrl}/save-order`, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data', }, body: data, }) .then(res => res.json()) .then(json => { console.log('json1', json); **want to return this json variable** alert('order placed'); }) .catch(error => { console.log('error in saving', error); }); };este es mi componente donde quiero obtener su respuesta cuando el pedido se realiza con éxito. Probé async y await pero no funcionó.
const postOrder = () => { var data = new FormData(); data.append('userId', state.user.id); dispatch(saveOrder(data)); };Parece que está utilizando redux para la gestión del estado. Sin embargo, no está utilizando la función de envío para almacenar los datos recibidos en saveOrder. En realidad, todo lo que hace tu dispatch es simplemente llamar al thunk necesario, y ya en él debes llamar a dispatch con una acción que almacenará los datos en el almacén. Luego, directamente en el componente mismo usando el selector, puede obtener los datos de la tienda cuando estén disponibles. En general, está utilizando redux-thunk solo para ejecutar una solicitud de API y no sigue los conceptos necesarios. Puede ver el modelo de uso aquí: https://redux.js.org/tutorials/essentials/part-5-async-logic
¿Le gustaría intentar pasar la función Dispatch como parámetro?
¿En caso de que tu Redux-Saga tenga problemas?
La forma en que crearía esta función sería un poco diferente, separando los roles.
const saveOrder = data => { return fetch(`${baseUrl}/save-order`, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data', }, body: data, }) .then(res => res.json()) .then(json => { return "Success" }) .catch(error => { return "Error" }); }; saveOrder("any data") .then(result => console.log(result)) .catch(error => console.log(error.message)) /*Instead of console.log you can place your dispatcher*/