react-redux 2位玩家

Question

我有2个音频播放器需要使用Redux捆绑在一起。
因此，请检查第一个（主要）播放器代码：

  const Player = ({songs}) => {  
  var [i,setI] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false);
  const [audio, setAudio] = useState()
  const [isRepeat, setRepeat] = useState('black')
  const [duration, setDuration] = useState() 
  const [currentTime, setCurrentTime] = useState()
  const [progress, setProgress] = useState()
  const [isMuted, setMuted] = useState('fa fa-volume-up')
  const [volume, setVolume] = useState(50)
  const barSize = 400


  const previus = () => {
   if(i !== 0){
     setI(--i)
     audio.src = `http://localhost:5002/song/${songs[i].filename}`
     audio.play()
     setIsPlaying(true)
   }else if(i === 0){
    setI(songs.length)
    audio.src = `http://localhost:5002/song/${songs[i].filename}`
    audio.play()
    setIsPlaying(true)
   }
      }
 const next = () => {
    if(i === songs.length - 1){
      setI(0)
      audio.src = `http://localhost:5002/song/${songs[i].filename}`
      audio.play()
      setIsPlaying(true)
    } else if(i < songs.length - 1){
      setI(++i)
      audio.src = `http://localhost:5002/song/${songs[i].filename}`
      audio.play()
      setIsPlaying(true)
    }
        }
  useEffect(() => {
  if(songs){
      const audio = new Audio(`http://localhost:5002/song/${songs[i].filename}`)
      audio.load();
      audio.autoplay = false
      audio.onloadedmetadata = () => {
        setDuration(audio.duration)
        audio.volume = 0.5
      }
      audio.ontimeupdate = (e) => {
        setCurrentTime(e.target.currentTime)
        setProgress(parseInt(e.target.currentTime*barSize/e.target.duration))
        if(audio.ended && !audio.loop){
          setI(++i)  
          e.target.src = songs[i]
          e.target.play()
          setIsPlaying(true)
        }else
        if(audio.ended){
          setProgress(0)
          setCurrentTime(0)
        }

    setAudio(audio);
  }
}
}
, [])
  const play = () => {
    setIsPlaying(true);
    audio.play();
  }

  const pause = () => {
    setIsPlaying(false);
    audio.pause();
  }
  const clickOnBar = (e) => {
    if(!audio.ended){
      var mouseX = e.pageX - document.getElementById('bar').offsetLeft
      setProgress(mouseX)
      var time = mouseX*duration/barSize
      audio.currentTime = time
    }
  }

  return (
      <div className="player-box">
  <div className="MainPlayer">
  <i className="fa fa-backward  player-btn" onClick={previus}/>
  {isPlaying ? <span 
  onClick={pause} 
   className='fa fa-pause player-btn'/> :  <span
  onClick={play} 
   className='fa fa-play player-btn'/>}


  <i className="fa fa-forward player-btn" onClick={next} />
  <i className="fa fa-random player-btn"/>
  <i className="fa fa-refresh player-btn" onClick={() => {
        if(isRepeat === '#671ca0'){
          audio.loop = false
          setRepeat('black')
        }else if (isRepeat === 'black'){
          audio.loop = true
          setRepeat('#671ca0')
        }
      }} style={{color: isRepeat}}/>
   <i className="player-btn">0:00</i>
   <div className="bar1" onClick={clickOnBar} id='bar'>
     <div className="progress1" style={{width: `${progress}px`}}>
     </div>
   </div>

   <i className="duration"> 
   {`${parseInt(currentTime/60)}:${Math.round(currentTime)%60 < 10 ? '0'+ Math.round(currentTime)%60 : parseInt(currentTime)%60}/${parseInt(duration/60)}:${Math.round(duration)%60 < 10 ? '0'+ Math.round(duration)%60 : Math.round(duration)%60}`}
   </i>
   <div className="volumer">

   <input type="range" min="0" max="100" onChange={(e) => {audio.volume = e.target.value * 0.01 ; setVolume(e.target.value)}} className="volume-range slider"/>

   <i className={isMuted + " player-btn volume-btn"} onClick={(e) => {
     if(isMuted === 'fa fa-volume-up'){
       audio.volume = 0 ;
       setMuted('fa fa-volume-off')
     }else {
      audio.volume = volume * 0.01 ;
      setMuted('fa fa-volume-up')
     }
   }}
   >
   </i>
   </div>
  {songs ? (<div className='song-info'>
  <p>{songs[i].artist}</p>
  <p>{songs[i].title}</p>
   </div>): []} 
  </div>
  </div>
  )
}

第二（迷你）：

const MiniPlayer = p => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [audio, setAudio] = useState()
    const [duration, setDuration] = useState()
    useEffect(() => {

      const audio = new Audio(`/song/${p.filename}`)
      audio.load();
      audio.autoplay = false
      audio.onloadedmetadata = () => {
        audio.volume = 0.5
        setDuration(audio.duration)
      }
      setAudio(audio);
    }, [])
    const play = () => {
      setIsPlaying(true);
      audio.play();
    }

    const pause = () => {
      setIsPlaying(false);
      audio.pause();
    }
  return (<div className="miniPlayer-box">
   {isPlaying ? <span 
    onClick={pause} 
     className='fa fa-pause player-btn'/> :  <span
    onClick={play} 
     className='fa fa-play player-btn'/>} 
     <a>{`${p.artist} - ${p.title} ${parseInt(duration/60)}:${Math.round(duration)%60 < 10 ? '0'+ Math.round(duration)%60 : Math.round(duration)%60}`}</a>
      <a href={`http://localhost:5002/download/${p.filename}`}><i class="fa fa-arrow-circle-down" /></a>
  </div>)
  }

这对我来说是一个非常困难的问题，如何与这些球员打成一片？
是否必须在一个播放器中呼叫音频播放？如何从第一到第二提供数据？
如此困难，我总是遇到redux问题，但不是这样...