如何解决如何在此音乐播放器的上一个/下一个选项中实现redux状态管理?
我尝试使用webpack在模块中拆分音乐播放器应用程序,但是存在一个问题... 我有一个包含歌曲的数组,例如:
let songs = ["Child In Time","Dance Monkey","Dusty Blue","Rains Of Castamere"];
let songIndex = 2;
我有一个名为'songIndex'的变量,该变量分配为0(后来,它有助于程序在数组的第三首歌-“ Dusty Blue”上启动应用程序)
通常,这2个功能可以播放阵列中的下一首或上一首歌曲
function prevSong(){
songIndex--;
if(songIndex < 0){
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]) //function that loads song details and and brings it to dom
playSong() //function which plays music
}
和
function nextSong(){
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]) //function that loads song details and and brings it to dom
playSong() //function which plays music
}
,文件底部的这2个事件监听器将启动它们:
prevBtn.addEventListener("click",prevSong)
nextBtn.addEventListener("click",nextSong)
但是我想将这两个功能移到其他模块中,然后我还需要在另一个模块中控制整个应用中“ songIndex”的状态...
这就是Redux JS出现的地方... 但... 我无法在SongIndex所在的同一js文件中实现redux ...
我是redux和javascript的新手,但我会尽力解释我为正确实现它所做的事情:
从'redux'导入redux; const createStore = redux.createStore;
const initialState = { songIndex:2 }
// Reducer
const rootReducer = function(state = initialState,action){
if(action.type === "PREV_SONG"){
return {
...state,songIndex: state.songIndex - 1
}
}
if(action.type === "NEXT_SONG"){
return {
...state,songIndex: state.songIndex + 1
}
}
return state;
}
// Store
const store = createStore(rootReducer)
// Subscription
store.subscribe(()=>{
store.getState();
})
我像这样编辑了这两个函数:
function prevSong(){
store.dispatch({
type: "PREV_SONG"
})
loadSong(songs[initialState.songIndex])
playSong()
}
function nextSong(){
store.dispatch({
type: "NEXT_SONG"
})
loadSong(songs[initialState.songIndex])
playSong()
}
结果:当我单击“下一个”或“上一个”按钮时,音乐会重新启动(在这种情况下,它是“ Dusty Blue”):(
我知道我应该犯下概念性错误
在这种情况下,实现redux的正确方法是什么? 还是谢谢你。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。