Search code examples
javascriptreactjsreduxflux

React/Flux: Firing an action from a render method of an component or doing a Rest call from a component?

I have a button on my component which will export the json of an object so that user can download it ? To get the JSON I will have to make a REST call to get the JSON and then I am doing this

    var definitionJson = JSON.stringify(definition);
    var definitionName = definition.name
    var exportedFileName = definitionName.concat(".json");
    var file = new Blob([definitionJson], { type: 'application/json' });

    //needed for IE10
    if (window.navigator && window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(file, exportedFileName);
    }
    else {
        var a = document.createElement("a");
        a.href = URL.createObjectURL(file);
        a.setAttribute("download", exportedFileName);
        a.click();
    }

I have some questions:-

  1. How should I fit this in Flux ? Should I fire an action creator which will download the json and then update some store to which a FileDownload Component will listen to. The component will trigger the above code but then it has to fire an action in its render method to set the store to value to empty?
  2. Is firing actions from the render method of a component, the right way ?
  3. Since this doesn't flow any data from my application, should I just use the React Component to fetch this JSON and pop it up for download ? This will make component doing a REST call.
  4. Instead of 3, Fire an action creator which will fetch the JSON and pop it up for download? In this case I will write the above code inside an action creator.
Solution

  • First why not triggering the download directly from your API server ?

    To answer your questions:

    1. How should I fit this in Flux ? Should I fire an action creator which will download the json and then update some store to which a FileDownload Component will listen to. The component will trigger the above code but then it has to fire an action in its render method to set the store to value to empty?

    If that component sole purpose is to trigger the download, you probably don't need a component from that. I would probably handle that in the action creator callback if bellow options aren't avaialble

    1. Is firing actions from the render method of a component, the right way ?

    No. Usually it's advised to you use componentWillMount for most actions that will influence the rendering of the component.

    1. Since this doesn't flow any data from my application, should I just use the React Component to fetch this JSON and pop it up for download ? This will make component doing a REST call.

    I assume that this refer to triggering the download from your API server ? If so I would use this approach. The UI don't need to be concerned about how to format a file for download.

    1. Instead of 3, Fire an action creator which will fetch the JSON and pop it up for download? In this case I will write the above code inside an action creator.

    If option 3 is available then I don't see any advantages of doing this. Just pick the simplest and least powerful solution.