I am trying to download data gotten from a GET request as a .txt file but I keep getting ‘undefined’ as the content of the downloaded file. I only need the data portion of the response. A sample response is provided below as well as my redux action, reducer and my export function My action:
export const previewLodgements = (id) => (dispatch) => { const accessToken = JSON.parse(localStorage.getItem('greenpole_redux_state')); dispatch({ type: certificateConstant.PREVIEW_CERTIFICATE_PROGRESS }); fetch(`${urlConstants.CERTIFICATE_BASE_URL}certificate/lodge/preview/${id}`, { method: 'GET', headers: { Authorization: `Bearer ${accessToken.auth.token}`, }, }) .then((res) => res.json()) .then((query) => { if (query.status === '00') { dispatch({ payload: query.data, type: certificateConstant.PREVIEW_CERTIFICATE_SUCCESS, message: 'Preview successful', }); } else { dispatch({ payload: query.data, type: certificateConstant.PREVIEW_CERTIFICATE_FAILURE, message: query.statusMessage, }); } }) .catch((error) => { dispatch({ payload: null, type: certificateConstant.PREVIEW_CERTIFICATE_FAILURE, message: 'unable to preview lodgements', }); }); };
my reducer:
import { certificateConstant } from '../../lib/constants/certificateConstants'; const initialState = { loading: false, previewLodgement: '', }; const certificateReducer = (state = initialState, action) => { switch (action.type) { case certificateConstant.PREVIEW_CERTIFICATE_PROGRESS: return { status: action.status, message: action.message, loading: true, }; case certificateConstant.PREVIEW_CERTIFICATE_SUCCESS: return { ...state, previewLodgement: action.payload, status: action.status, message: action.message, loading: false, }; case certificateConstant.PREVIEW_LODGEMENT_FAILURE: return { ...state, previewLodgement: action.payload, status: action.status, message: action.message, loading: false, }; default: return state; } }; export default certificateReducer;
my download function:
const previewLodgement = useSelector( (state) => state.certificateReducer.previewLodgement, ); const handleExport = () => { let id = selectedLodgements[0]; if (validateCheck()) { dispatch(previewLodgements(id)); var a = document.createElement('a'); var file = new Blob([previewLodgement], { type: 'text/plain' }); a.href = URL.createObjectURL(file); a.download = 'lodgement.txt'; document.body.appendChild(a); a.click(); } };
response gotten from server after API call:
{ "status": "00", "statusMessage": "", "data": "Title: Certificate Lodgement 1nControl Number: 847834783748738nDate Lodged: 2020-12-27 00:00:00.0nStatus: Not TreatednnCertificatesn==============nnCertificate Number: 1324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Andrew EfurhievwenHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: 2111389645nOld Holder Arp Account Number: nIssuing Company: Duff Beernchn: 123456789nclaimed: YesnnCertificate Number: 1324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Andrew EfurhievwenHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: 2111389645nOld Holder Arp Account Number: nIssuing Company: Africa Prudentialnchn: nclaimed: YesnnCertificate Number: 2324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Lisa SimpsonnHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: PeternOld Holder Arp Account Number: nIssuing Company: Duff Beernchn: nclaimed: Yesnn", "date": 1609925003880 }
I am trying to download only the string in ‘data’ as a text file
Advertisement
Answer
You are passing query.data
to your reducer as a payload, then (on your reducer) your action.payload
becomes:
"Title: Certificate Lodgement 1nControl Number: 847834783748738nDate Lodged: 2020-12-27 00:00:00.0nStatus: Not TreatednnCertificatesn==============nnCertificate Number: 1324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Andrew EfurhievwenHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: 2111389645nOld Holder Arp Account Number: nIssuing Company: Duff Beernchn: 123456789nclaimed: YesnnCertificate Number: 1324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Andrew EfurhievwenHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: 2111389645nOld Holder Arp Account Number: nIssuing Company: Africa Prudentialnchn: nclaimed: YesnnCertificate Number: 2324354565656565nOld Certificate Number: nVolume Of Bonds: 400nIssue Date: 2020-09-30 00:00:00.0nHolder Name: Lisa SimpsonnHolder Address: 12, SpringfieldnHolder Email: nizyvi@getnada.comnHolder Cscs Account Number: 7647637467463746nOld Holder Cscs Account Number: nHolder Arp Account Number: PeternOld Holder Arp Account Number: nIssuing Company: Duff Beernchn: nclaimed: Yesnn"
there is no action.status
property (that is why you are getting undefined) for your action object just one property called payload with an string as a value.
On your reducer try logging action.payload
and it will become a lot clear to you.