Redux相互に通信するインスタンスごとに1つのストア

Question

複数のオーディオプレーヤーコンポーネントインスタンスがあります。私は、次のリンクのようにインスタンスごとに1つの店舗を使用しています：https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400とHow to create one store per instance in Redux?。

これは、一度に1つのオーディオプレーヤーをアップデートするのに最適です。 問題は、各オーディオプレイヤーが特定のアクションで何らかの形で互いに通信できる必要があることです（つまり、1つのオーディオプレーヤーが再生を開始し、他のプレーヤーが再生を一時停止する必要がある場合）。インスタンスごとに1つのストアでこれを行うにはどうすればよいですか？現時点では、他の店舗のインスタンスとどのように通信できるかわかりません。

私はちょうど1つのストアとその中に複数のインスタンスを持っていましたが、いくつかのプロパティ（つまり、1つのオーディオプレーヤーが再生を開始したときに再生を開始する）ではないすべてのオーディオプレーヤーで状態を共有します。

このような状態のプロパティを持つ方法はありますか？例えばオーディオプレーヤーあたり

ユニークな状態のプロパティ：すべてのオーディオプレイヤー間

{ 
    paused: false, 
    mp3: "" 
} 

共有状態プロパティ：

{ 
    globalPause: true, //Pause all other audio player instances that have this set to true 
    globalVolume: true //Modify volume of all other audio player instances that have this set to true 
} 

AudioPlayer：

class AudioPlayer extends React.Component { 
    render() { 
     return (
      <Player className="default"> 
       <Gui> 
       {//Other Components here} 
       </Gui>    
       <BrowserUnsupported /> 
      </Player> 
     ); 
    } 
} 

AudioPlayer.options = { 
    selector: "audio-player", 
    muted: true, 
    autoplay: false, 
    mp3: //Mp3 url, 
}; 

export default AudioPlayer; 

AudioPlayerTwo：

class AudioPlayerTwo extends React.Component { 
    render() { 
     return (
      <Player className="default"> 
       <Gui> 
       {//Other Components here} 
       </Gui>    
       <BrowserUnsupported /> 
      </Player> 
     ); 
    } 
} 

AudioPlayerTwo.options = { 
    selector: "audio-player-two", 
    muted: true, 
    autoplay: false, 
    mp3: //Mp3 url, 
}; 

export default AudioPlayer; 

インデックス：

createPlayer(AudioPlayer); 
createPlayer(AudioPlayerTwo); 

createPlayer：

const mapStateToProps = (state) => ({ 
    ...state.Player, 
}); 

const mapDispatchToProps = (dispatch) => ({Player: bindActionCreators(PlayerActions, dispatch)}); 

export default createPlayer = (WrappedComponent) => { 
    WrappedComponent = connect(mapStateToProps, mapDispatchToProps)(WrappedComponent); 

    const store = createStore(reducer, { 
     Player: defaultValues 
    }); 

    ReactDOM.render(
    <Provider store={store}> 
     <WrappedComponent /> 
    </Provider>, 
    document.getElementById(WrappedComponent.options.selector)); 
} 

アクション（このような同じ形式でそれらのカップル）：

export const play = (time) ({ 
    type: "PLAY", 
    time 
}); 

export const volume = (volume) ({ 
    type: "VOLUME", 
    volume 
}); 

リデューサー：

const play = (state, action) => { 
    if(state.srcSet) { 
     return updateOption(state, { 
      paused: false, 
      newTime: !isNaN(action.time) ? action.time : state.currentTime 
     }); 
    } 
} 

const volume = (state, action) => updateOption(state, { 
    volume: limitValue(action.volume, 0, 1) 
}); 

const updateOption = (existingObject, newValues) => ({ 
    ...existingObject, 
    ...newValues 
}); 

export default (state={}, action) => { 
    switch (action.type) {   
     case "PLAY": 
      return play(state, action); 
     case "VOLUME": 
      return volume(state, action); 
     default: 
      return state; 
    } 
} 

Answer 1

あなたはreduxミドルウェアを使用する必要がありますが、私の提案はredux-sagaとpostal.jsのようなpub/subライブラリでしょう。

基本的に、ミドルウェアはアクションを公開し、他のミドルウェアはリスンしている（購読している）。たとえば、あるプレイヤーでプレイした場合、ミドルウェアはこのイベントをパブリッシュし、他のすべてのプレイヤーはpub/subライブラリを介してリスニングしています。このメッセージが表示されたら、ローカルのリューデックスストアに「ストップ」アクションを渡すことができます。