React How can add payload in reducer-CodePudding

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))
    }, 
  };

CodePudding user response：

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;
  }

}

CodePudding user response：

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;
  }

}

CodePudding user response：

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
        ]
      }
    }
  }
}
``````````````````````````````````````````````````