2017-04-21 17 views
1

私はオーディオプレーヤーを持つ反応ネイティブのアプリを作っていますが、このオーディオプレーヤーはコントローラー(再生、停止、スキップなど)で見ることができます。複数のコンポーネントから制御されます。今私はプレーヤーの状態を含むアプリケーションの状態を管理するためにreduxを使用しています(isPlaying、currentTrack ...)。react-reduxを使用しているときに、別のコンポーネントからコンポーネントメソッドを呼び出しますか?

私の質問は、他のコンポーネントがプレーヤ上でアクションを実行するための最良の方法または良い方法はなんですか?

答えて

0

動作を制御する一般的なパターンは、動作(関数)を小道具を介して他のコンポーネントに渡すことです。

メディアプレーヤーの共有制御のあなたのケースでは、あなたがこのアーキテクチャ(擬似コード)で何か可能性があります。この場合

togglePlayer(){ 
    this.setState(state=>({playing: !state.playing})) 
    //or 
    dispatch(togglePlayerActionCreator()) 
} 

<Player isPlaying={this.state.playing} /> 

<ThingThatControlsPlayer onSomeEvent={this.togglePlayer} /> 

<ThingThatControlsPlayer onSomeEvent={this.togglePlayer} /> 

を、各兄弟コンポーネントがアクセスできる一般的な機能があり、経由関数は小道具として渡されます。プレイヤーは、その関数が呼び出された結果、状態の変化に反応します。これが内部コンポーネント状態であれ、プロキシとしてコンポーネントに渡されたreduxストアであれ、パターンは同じです。 react + reduxアーキテクチャでは、の状態がダウンし、イベントが流れます。

関連する問題