Я хочу добавить полезную нагрузку в состояние => альбомы => песни. Альбомов много, и в этих альбомах будет более одной песни. Как я могу добавить песню в альбом, к которому она принадлежит.
состояние :{ альбомы : [название, песни:[] ]}
case : "Add_Song"
const reducer = (state,action) =>{
switch(action.type){
case "Add_Album":
return {
...state,
albums :[...state.albums,action.payload]
}
case "Add_Song":
return {
...state,
albums : // *********neeed THERE********
}
case "Remove_Album" :
return {
...state,
albums : state.albums.filter(album =>action.payload.album !== album.album)
}
}
default:
return state;
}
}
штат :
state = {
albums: [],
dispatch : action =>{
this.setState(state =>reducer(state,action))
},
};
Есть ли у song свойство, подобное albumId, или какой-то способ связать песню с альбомом?
название альбома уникально @morganney
я могу установить action.payload = {album: 'albumname', song: 'songname'}
Я думаю, что редукционный преобразователь соответствует вашему требованию. Проверь это



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


const reducer = (state,action) =>{
switch(action.type){
case "Add_Album":
return {
...state,
albums :[...state.albums,action.payload]
}
case "Add_Song":
const updatedAlbums = state.albums.map((album) => {
//use `album.name` to find
if (album.name === action.payload.album) {
//modify `songs` list
return {...album, songs: [...album.songs, action.payload.song]}
}
return album // this album does not match, so don't need to change
})
return {
...state,
albums : updatedAlbums
}
case "Remove_Album" :
axios.post("http://localhost:5000/delete",action.payload)
return {
...state,
albums : state.albums.filter(album =>action.payload.album !== album.album)
}
}
default:
return state;
}
}
const reducer = (state,action) =>{
switch(action.type){
case "Add_Album":
return {
...state,
albums :[...state.albums,action.payload]
}
case "Add_Song":
return {
...state,
albums : albums.map((album) => {
if (album.id === action.payload.album.id) {
return {
...album,
songs: [...album.songs, action.payload.song]
}
}
return album;
})
}
case "Remove_Album" :
return {
...state,
albums : state.albums.filter(album =>action.payload.album !== album.album)
}
}
default:
return state;
}
}
Вам нужно определить свое начальное состояние, подобное этому, где массив альбомов содержит несколько альбомов в формате объектов, поэтому у нас есть массив идентификаторов, имен и песен в объекте альбома, подобном этому....
const initialState = {
albums:[
{id:0,name:'abc',songs:[]}
]
}
const reducer=(state=initialState,action)=>{
switch(action.type){
case 'Add_Songs':{
//first get album id, song from actionPayload like this
const {id,song}=action.payload;
//find required album by id like ...
let givenAlbum=state.albums.find(album=>album.id===id);
//now update given album songs by this
givenAlbum.songs.push(song);
//finally return updated albums
return {
...state,
albums:[
...state.albums,givenAlbum
]
}
}
}
}
``````````````````````````````````````````````````
Ваши редукторы не должны иметь побочных эффектов.
axios.postпока удаление альбома является побочным эффектом, вам следует перейти к действию.