Javascript 将“新音频”元素添加到我的redux存储

我正在尝试向我的redux存储添加一个新的音频元素

我有一个减速器，看起来像这样：

export const songsReducer = (state = {}, action) => {

    switch (action.type) {
        case "PLAY_SONG":
           return {
             ...state,
             songPlaying: true,
             songDetails: action.song,
             audioPlaying: new Audio(action.song.url)
        }


        case "STOP_SONG":
            return {
              ...state,
              songPlaying: false,
              songDetails: null
            }

        default:
          return state;
    }

};

export default songsReducer;

但是，当我检查我的redux存储

audioPlaying

时，它是一个空对象，如下所示

{}

有人能告诉我我做错了什么吗

我调用动作的组件在这里

class Audio extends Component {

    static audio;

    playSong = (song) => {
        if(!this.props.audioPlaying){
            this.props.playSong(song);
            // I want to move the following lines out of the 
            // component as I need to control the audio from elsewhere in the app 
            // this.audio = new Audio(song.url); 
            // this.audio.play(); 
        } else {
            this.props.songsReducer.audio.pause();
            this.props.playSong(song);
            // this.audio = new Audio(song.url);
            // this.audio.play();
        }
    }

    render() {
       this.props.songs.map(song => {
         return (
           <li onClick={(song) => this.playSong(song)}>Play { song.name }</li>
         );
      });
    }
};

class音频扩展组件{
静态音频；
播放歌曲=（歌曲）=>{
如果（！this.props.audioPlaying）{
这个。道具。播放歌曲（歌曲）；
//我想把下面几行移出
//组件，因为我需要控制应用程序中其他位置的音频
//this.audio=新音频（song.url）；
//这个.audio.play（）；
}否则{
this.props.songsReducer.audio.pause（）；
这个。道具。播放歌曲（歌曲）；
//this.audio=新音频（song.url）；
//这个.audio.play（）；
}
}
render（）{
this.props.songs.map（歌曲=>{
返回(
this.playSong（song）}>Play{song.name}
);
});
}
};

音频对象是什么

否则，我建议将播放的歌曲直接存储在属性

audioPlaying

中。我假设

action.song.url

是歌曲url的字符串

而不是这样做：

audioPlaying: new Audio(action.song.url)

这样做：

audioPlaying: action.song.url

---

正如我所看到的，您的redux状态并不是一成不变的，这可能会在以后给您带来一些问题。我建议您使用类似的库来解决这个问题。

发布触发播放歌曲的组件action@Karim添加了相关的代码您是否与调试器一起检查它是否到达减速机中的PLAY_SONG大小写？请添加mapdispatch和mapstate函数。我可以在chrome开发工具中看到它tools@peter-弗拉纳根：你想储存你的反应组件吗？