React 如何在 reducer 中添加 payload

Question

我想在 state=> albums =>songs 中添加有效載荷，有很多專輯，這些專輯中會有不止一首歌曲。 如何將歌曲添加到它所屬的專輯中。

state：{專輯：[名稱，歌曲：[]]}

案例：“添加歌曲”

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

Answer 1

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

}

Answer 2

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

}

Answer 3

您應該需要像這樣定義您的初始 state，其中專輯數組在對象格式中包含多個專輯，因此我們在專輯 object 中有 id、名稱和歌曲數組，就像這樣....

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