RTCPeerConnectionオブジェクトをReact/Reduxアプリケーションに保存する場所はどこですか？

Question

RTCPeerConnectionは、オブジェクトを変更するときに呼び出される特定のメソッド（setLocalDescription、addIceCandidateなど）を持つオブジェクトです。これらのメソッドは、WebRTC接続の反対側から受信したシグナリングに基づいて呼び出されます（オファーまたは氷の候補を受け取ったときなど）。

したがって、このオブジェクトは、最初の近似で突然変異を制御することはできず、単純なコピーを作成することはできませんので、reduxストアには適していないようです。これによりRTCPeerConnectionの以前のwebRTCセッションが削除されるためです。

Reactを使用するWebRTCアプリケーションでは、おそらく異なるコンポーネントがRTCPeerConnectionオブジェクトにアクセスする必要があります（たとえば、アプリケーションのトップレベルコンポーネントのマウント時にインスタンス化されていますが、 RTCPeerConnectionのメソッドを呼び出して、受け取ったwebRTCオファーへの回答を作成するか、深くネストされたコンポーネントが呼び出しを開始する必要があります）。唯一の解決策は、オブジェクトをコンポーネントツリーの下に小道具として渡すことですか？このような複雑なオブジェクトでreduxを使用する方法はありませんか？

UPDATE：socket.ioを処理するためにミドルウェアを使用することに関する以下の回答を考慮して、元の質問を書き直してください。最終的にいくつかの方法を受け取る必要があるディスパッチコールを処理します。setRemoteDescriptionのようなメソッド呼び出しを行う元のRTCPeerConnectionへの参照はどうですか？

Answer 1

Reduxアプリケーションの「ソケット」のような接続オブジェクト（Webソケット、Firebaseなど）の標準的な場所はミドルウェアです。ソケットを何かするように指示する必要があるアプリケーションのどの部分も、ミドルウェアによって傍受されるアクションをディスパッチし、ミドルウェアは、受信したメッセージに応答して状態を更新するアクションをディスパッチできます。

Redux addons catalogのMiddleware - Sockets and Adaptersセクションには、数多くのさまざまなソケット用のミドルウェアの既存の例があります。

更新

はここRTCミドルウェアはどのように見えるかの簡単な例です。コードが完全にテストされていないが、これは考え方を説明する必要があります。

function createRtcMiddleware() { 
    return (store) => { 
     let rtcPeerConnection = null; 

     return (next) => action => { 
      switch(action.type) { 
       case "RTC_CONNECTION_CREATE": { 
        const {rtcConfig} = action; 
        rtcPeerConnection = new RTCPeerConnection(rtcConfig); 

        rtcPeerConnection.somecallback =() => {  
         // maybe dispatch a Redux action in response to 
         // a received message     
        }; 

        // Do not pass the action down the pipeline, since only 
        // this middleware cares about it 
        return; 
       } 
       case "RTC_CONNECTION_SET_DESCRIPTION": { 
        if(rtcPeerConnection) { 
         rtcPeerConnection.setDescription(action.description); 
        } 

        return; 
       } 
      } 

      // If we don't care about it, pass it down the pipeline 
      return next(action); 
     }  
    } 
}