Redux每個實例互相通信一個商店

我有多個音頻播放器組件實例。我在每個實例中使用一個商店，如下面的鏈接：https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400和How to create one store per instance in Redux?。Redux每個實例互相通信一個商店

這對於一次更新單個音頻播放器非常適用。問題是，每個音頻播放器需要能夠以某種方式以某種方式相互通信（即當一個音頻播放器開始播放時，其他播放器需要暫停）。我怎樣才能做到這一點每個實例一個商店？目前我看不到如何與其他商店實例溝通。

我試圖在其中有一個存儲區和多個實例，但是在所有音頻播放器之間共享狀態並非我想要的某些屬性（即當一個音頻播放器開始播放時，它們都開始播放）共享。

他們是否有任何方式具有這樣的狀態屬性？每個實例的音頻播放器

獨特的狀態屬性：

{ 
    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; 
    } 
}

來源

2017-01-01 Martin Dawson

你可以發佈你的'行動'嗎？ –

@JyothiBabuAraja編輯帖子。 –

爲什麼你想創建2個商店？相反，每個玩家有一個商店和兩個減速器。那麼你可以訪問其他玩家的狀態。如果你有不同的商店，它可能不是'redux'的東西。 –

-1

您將需要使用redux中間件，我的建議將是redux-saga和pub/sub庫（如postal.js）。

基本上你想要的是一個發佈操作的中間件，其他中間件正在監聽（訂閱）。因此，例如，如果您打一個玩家玩中間件發佈此事件，所有其他玩家都通過酒吧/子庫收聽，並且當他們看到此消息時，他們可以將「停止」行爲傳遞給他們的本地redux商店。

來源

2017-01-01 15:51:10

我想我可以做到這一點，而不需要使用看似複雜的額外中間件。 –

Redux每個實例互相通信一個商店

回答

相關問題