Redux - 非同期に派生した非直列化可能オブジェクトへのアクセス方法

Question

私のユーザーはURLを提供しています。そのURLをReact + Reduxアプリの<canvas>要素のバックグラウンドとして使用したいとします。これは、Reactコンポーネントのrender()メソッドが、ユーザーの画像を含む<img> DOMノードにアクセスする必要があることを意味します。イメージタグのsrc属性を設定することは、非同期です。なぜなら、要求されたイメージは、データがサーバーからフェッチされるまでDOMに実際には格納されないからです。

通常、非同期タスクでは、非同期タスクの結果を直接Reduxストアに格納しますが、Redux docsを読み取ると、非直列化可能オブジェクト（DOMノードなど）が格納されているように見えます）店舗にはアドバイスされていません。

この問題を解決する他の合理的な方法はありますか？現時点では、Reactコンポーネントのライフサイクルメソッドを悪用して、URL小道具が変更されるのを監視し、<img> DOMノードを非同期的にコンポーネントの状態に設定しています。

Answer 1

画像URLを店舗/州に保存してImage constructorに渡すのはなぜですか？

render() { 
    var bg = new Image() 
    bg.src = this.state.url 
    // here you use the bg as an <img> element 
} 

あなたがコールバックとしてではなく、状態変化への反応として、それを設定しないでください。この方法を：あなたはstateでurlを持っていると仮定すると

。