I wanto add payload in state=> albums =>songs, There are many albums and there will be more than one song in these albums. How can I add the song to the album it belongs to.
state :{ albums : [name, songs:[] ]}
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 :
state = {
albums: [],
dispatch : action =>{
this.setState(state =>reducer(state,action))
},
};
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;
}
}
You should need to define your initial state like this where albums array contains multiple album in objects formate so we have id,name and songs array in album object like this....
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
]
}
}
}
}
``````````````````````````````````````````````````