ES6 Promises - 遅延を使用せずに、React componentDidMount関数でインスタンス化されたオブジェクトへの最終的なアクセスを保証するにはどうすればよいですか？

Question

皆様、ありがとうございます。

私は初めてES6ネイティブの約束事を使用しています（以前は、QまたはAngularの$ qサービスを使用していました）。私は、延期を利用することで簡単に解決できる問題があり、ES6の約束がそれらを使用しないことを発見するのに驚いた。

私はさらに、ブログで多くの人々がアンチパターンとしての使用を参照していることに驚きました。なぜなら、彼らの例は私が決して遅れをとって使用していなかった場所だったので、何かが足りなくなっているかもしれない（そして、説明を気にしないだろうなぜ彼らは脇の下として悪いのですか）。しかし、ベストプラクティスの範囲内にとどまることを目指して、私はそれらをサポートする図書館を引っ張らずに何かを解決する方法を見つけようとしており、私は立ち往生しています。

私は、React/ReduxアプリケーションでOpenLayersライブラリを使用してマップを作成しています。 OpenLayersでは、マップオブジェクトの作成時にマップを配置するためにDOM要素が必要です。したがって、コンポーネントがマウントされるまでOpenLayersマップをインスタンス化することはできません。それはいいです、それにはcomponentDidMountのライフサイクルフックがあります。

私が問題に遭遇するのは、そのマップオブジェクトを他のクラスに公開する必要があり、それらのクラスにマップが作成されるまで実行を待つ必要のあるコードがあることです。延期して、以下に示すように

、私はかなり単純にこれを扱うことができます：

const deferred = Q.defer(); 

const Foo = React.createClass({ 
    componentDidMount() { 
    const map = new ol.Map(...); 
    deferred.resolve(map); 
    } 
    ... 
} 

export getMap => deferred.promise 

は、しかし、ES6の約束で、私はこだわっています。

私はcomponentDidMountクラスの外で約束をインスタンス化することはできません。これは直ちに実行されるためです。

componentDidMount関数の範囲内で約束をインスタンス化する（または自分のコードが同期であるためPromise.resolveを使用する）場合、約束はgetMap関数の有効範囲外です。

promiseオブジェクトをcomponentDidMountのスコープの外部にインスタンス化しないと、getMapはcomponentDidMountが実行されるまでundefinedを返し、最初に約束を持つポイントを破棄します。

OpenLayersマップは非常に可変であり、独自のことをしているので、マップを置くと不変のReduxコミットメントが破られるので、私はそのマップをRedux状態にしません... so私はReduxソリューションを放棄しました。 "mapAvailable"のようなRedux状態で何らかのブール値を投げると、ハックのように感じます。私はおそらくその作業を行うことができますが、それは副次的な問題のホストを導入するでしょう。

私は何が欠けていますか？遅れが本当に正しい答えであるか、わかりません。

また、お時間をありがとうございます。

Answer 1

私はさらに、ブログで多くの人々がアンチパターンとしての使用を参照していることに驚きました。

あなたはDeferredの作り方の特定使い方についてである、ここでdeferred antipatternを参照するように見える - それはDeferredの作り方がアンチパターンであることを言っていません。

は、あなたがどんな繰延オブジェクトを必要としない、それにもかかわらず:-) deferreds are deprecatedが、resolve機能は絶対に十分です。

componentDidMountクラスの外に約束をインスタンス化することはできません。すぐに起動するためです。

なぜすぐに発射しますか？ただしないでください。あなたも、クラスのまわりでそれをラップすることができます：

export const promise = new Promise(resolve => { 
    const Foo = React.createClass({ 
    componentDidMount() { 
     const map = new ol.Map(…); 
     resolve(map); 
    } 
    … 
    } 
    … // do something with Foo here 
}); 

が、より多くの可能性が高いあなたは、これは恐ろしいパターンであることを当然の通知を

let resolve; 
export const promise = new Promise(r => { 
    resolve = r; 
}); 
export const Foo = React.createClass({ 
    componentDidMount() { 
    const map = new ol.Map(…); 
    resolve(map); 
    } 
    … 
} 

をしたくなります - あなただけのグローバルを作成しました静的約束、基本的にシングルトン。 Fooののいずれかのコンポーネントがマウントされると解決されます。それをしないでください。私はあなたのコンポーネントのコンストラクタに約束を置くことをお勧めしますが、私はあなたがそれが必要なものが何であるかまだまだわかりません。

Answer 2

遅延がうまくいく場合がありますが、それらは古くなってしまい、遅延パターンの使用を禁止するパターンを見つけているのです。

延期が廃止されたという詳細については、this linkをご覧ください。

私はmapAvailableと同じ解決策を考え、ハックになることに同意します。あなたがこの状況に対してより良い解決策を見つけた場合は、お知らせください。