Quiero agregar carga útil en estado => álbumes => canciones, hay muchos álbumes y habrá más de una canción en estos álbumes. ¿Cómo puedo agregar la canción al álbum al que pertenece?
estado :{ álbumes : [nombre, canciones:[] ]}
caso: "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; } }estado :
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; } }Debería definir su estado inicial de esta manera, donde la matriz de álbumes contiene varios álbumes en formato de objetos, por lo que tenemos una matriz de identificación, nombre y canciones en un objeto de álbum como este ...
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 ] } } } } ``````````````````````````````````````````````````