非UIアプリケーション用のReduxアーキテクチャ

Question

私はhtml5オーディオプレーヤーで作業していますが、状態（データ）を流すためのUIがなくてもReduxが良い解決策になるかどうかを判断しようとしています。

私は複数のモジュールを持っています

：

1. 再生モジュールを：audio要素からすべてのコールバックをカプセル化し、状態を更新するために、各コールバックの後にアクションを派遣。

2. ストリーミングモジュール：プリフェッチするどのセグメント、与えられた時間に必要されるセグメント、...

3. MediaSourceのモジュールを見つけ出すためのすべてのロジック：メディアソースモジュールは、すべてのアクションのラッパーですメディア・ソースおよびソース・バッファ。

質問1： audio要素は、それが遊んで、自分の状態のしている、、、CURRENTTIMEを求めて、一時停止...とReduxの状態は、audio要素の状態を反映しています。 それは良い方法ですか？私は、2つの州が異なる場所にあり、同期が外れていることに心配しています。

質問2： 誰が最初に更新されましたか？ のは、私は私のプレーヤーを一時停止したいと想像してみましょう：

//Implementation 1: 
    function pause() { 
    dispatch({type:'PLAYBACK_PAUSED'}).then(()=> { 
     this.audio.paused = true; 
    }); 
    } 

    // Implementation 2: 
    function pause() { 
    dispatch({type:'PLAYBACK_PAUSED'}); 
    this.audio.paused = true; 
    } 

    // Implementation 3: 
    function pause() { 
    dispatch({type:'PLAYBACK_PAUSED'}); 
    onPause(); 
    } 

    function onPause() { 
    const state = getState(); 
    if (this.audio.paused != state.paused) { 
     this.audio.paused = state.paused; 
    } 
    } 

質問3： 0.5秒ごとに、オーディオ要素は、新しい現在の時間でのコールバックをトリガします。このコールバックがトリガされているとき、私は状態の現在の時刻を更新するアクションをディスパッチします。 ストリーミングモジュールは、この時点でどのセグメントが必要かを把握するためにその変更を認識し、将来のセグメントをプリフェッチする必要があるかどうかを知る必要があります。

どのように私のストリーミング・モジュールは、その状態変化を認識していると思われますか？そのような

？：

currentTime = 0; 
... 
const state = getState(); 
if (state.currentTime !== currentTime){ 
// Do Something... 
// Do Something Else... 
} 

が

Answer 1

ありがとう、私はあなたの質問一つ一つに取り組むてみましょう：

を使用していると仮定すると、質問1

HTML5オーディオコンポーネント：あなたのような別のコンポーネントの状態を補完/同期する還元状態については何も問題ありませんrオーディオプレーヤー。しかし、あなたは多分あなたにそれを配線することができ、オーディオコンポーネントを自分で構築された、場合、すべてのケースでは、しかし、私は

（例えば遅延があるはずです）Reduxの状態がオーディオコンポーネントの状態を、次のことを示唆していますそれから直接イベントを送信することによって生態系を還元する。

質問2

私は前の回答で述べたように、私はいつもコンポーネントが一時停止を認めた後の状態を更新し、最初の実際のコンポーネントを一時停止して行くだろう。これは、オーディオコンポーネントが完全に一時停止したとき（たとえば、onPauseコールバックで）ディスパッチをトリガすることを意味します。オーディオ要素が状態に従うことを期待するのではなく、オーディオ要素の状態を追跡するのは、要素が同期的に/一時的に停止しないために、状態が同期しなくなる可能性があるからです。

あなたはReduxの状態ごとに0.5秒を更新するためにイベントを送出質問3、あなたはストリーミングモジュールに別のイベントを送出できます。このために、私はそうのような非同期アクションの作成者を使用することをお勧め：

import StreamingModule from 'your-streaming-module'; 

export function updateTime (timeInMs) { 
    return (dispatch) => { 
     dispatch({ 
      type: YOUR_UPDATE_ACTION 
      time: timeInMs 
     }); 

     // pseudo 
     StreamingModule.fetchSegment(timeInMs); 
    }; 
} 

代替は、直接店舗状態に加入することになります。これは、すべてあなたのストリーミングモジュールがインスタンス化/構造化されている方法によって異なります。

import { createStore } from 'redux'; 
import StreamingModule from 'your-streaming-module'; 

const store = createStore(...); 

store.subscribe(() => { 
    StreamingModule.fetchSegment(store.getState().time.ms); 
}); 

あなたはセグメントをフェッチする前に、あなたがどこかに現在の時刻を保存しない限り、後者がうまく動作しない場合があります。

これが役に立ちます。