canvas - Redux - How to access a non-serializable object which is derived asynchronously? -

my user supplies url, , want use url background <canvas> element in react+redux app.this means render() method of react component needs access <img> dom node containing user’s image. unfortunately setting src attribute of image tag asynchronous, since requested image not populate in dom until data has been fetched server.

normally asynchronous task, api call example, 1 store result of asynchronous task directly redux store, reading redux docs, appears storing non-serializable objects (like dom node) in store not advised.

is there other reasonable way solve problem? abusing react component's life-cycle methods watch url prop change, , setting <img> dom node component's state asynchronously, feels awkward.

why don't store image url in store/state , pass image constructor?

assuming have url in state:

render() {   var bg = new image()   bg.src = this.state.url   // here use bg <img> element } 

this way don't set callback reaction state change instead.