I am developing a simple audio player in flux/react using html5 audio component.
I get that one of flux' key principles is that data should flow one way.
action - > store - > component
The "store" should be the source of truth.
I am running into difficulties following these principles in this particular scenario because the data has to be sourced form the audio component, eg the duration of the mp3 is part of the audio component api, as well as it's current position.
I thought perhaps I could use an action to pass all the initial data to the and update it with new track positions (as the user is playing a clip) but this feels really ugly... how can I abide by flux principles with this in mind?
One of the creators of the React Router is fond of saying, "Who owns the data?" If it's the application, then it belongs in a store. If it's entirely contained within a component, that component can manage its own state.
In this case, I think the best case is that it should be handled by the component itself. Perhaps if the audio is interrupted/paused, that action might, in turn, notify a store that could save the position, etc, but that's probably only true if there is only one player on the page.