Mixing Flux with in-component requests

Question

I am building a react app with altjs as flux implementation. Currently I am making an image uploader component. The component takes an image, uploads it to the cloud and puts the url in the response in an input. The image url is sent within the form. It is also possible to skip the uploading process and type in the url manually.

The image upload process is as follows:

• Component makes a request to the server, gets a signature.
• The signature and the file is sent to the cloud storage and an url for the uploaded image is returned.
• The url is set to the value of an input field.

I think this process will be easier if I make the requests in the component (in click handler function) without using flux. I do not need a flux store at all. I believe this is a better approach because this way I can put the component in any app and have it working. If I were to use flux, I would also need to transfer the action file and modify it a bit

It is generally said that every api request should go through flux as a good practice.

Is this a good practice or can I implement it in a better way using flux?

Answer 1

I think what you should do there is separate the concern of displaying the variables (image url), the button etc from the concern of the uploaded image and the signature you need as well.

Separated the components for having an image upload become very easy to handle and duplicate into almost any project, while the responsibility for uploading the image etc (which generally differs more per backing store / API ) is in a higher component. You can then choose per project if you choose to use flux for it or if you let the higher component execute with the data coming from the uploader and setting the props.

My suggestion would be to do the above with flux, but that's just because I feel really comfortable with the data flow in the whole application to be the same.