Download file using redux flow

Question

Could not find any example describing it.

I'm trying to create download button using react app but going through redux, ie. in action I'm connecting to url and getting the file in response (code 200).

export function sendTimeline(token, timelineObj) {
  const request = axios.post(`muURLGoesHere`, timelineObj, {
    headers: {
      "Content-Type": "application/vnd.ms-excel",
      "X-Accept-Version": "v1",
      Authorization: `Bearer ${token}`
    }
  });

  console.log(request);

  return {
    type: constants.actionTypes.TIMELINE_DATA,
    payload: request
  };
}

How can I pass it to reducer and download it on the react side.

You maybe know the article with an example or any hint on that.

Thank you

score 1 · Answer 1 · answered May 09 '18 at 10:26

I wouldn't dispatch actions with promised as payload. Use redux-thunk additionally to do more fine grained dispatch of successive actions:

const sendTimeline = (token, timline) => dispatch => {
  dispatch({ type: 'sendtimeline/start' })

  return fetch(…)
    .then(res => res.json())
    .then(json => dispatch({
      type: 'sendtimeline/success',
      payload: json
     }))
    .catch(err => dispatch({
      type: 'sendtimeline/error',
      payload: err,
      error: true
     }))
}

That way you do not have to deal with async problems in the reducer, since the actions handle that. Also you can do stuff like:

this.props.sendTimeline(…).then(…)

when used within a component, since the promise is returned from the action creator.

Have a look here as well

Download file using redux flow

1 Answers1