React Как добавить полезную нагрузку в редуктор

Я хочу добавить полезную нагрузку в состояние => альбомы => песни. Альбомов много, и в этих альбомах будет более одной песни. Как я могу добавить песню в альбом, к которому она принадлежит.

состояние :{ альбомы : [название, песни:[] ]}

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

Ваши редукторы не должны иметь побочных эффектов. axios.post пока удаление альбома является побочным эффектом, вам следует перейти к действию.

morganney 17.03.2022 14:16

Есть ли у song свойство, подобное albumId, или какой-то способ связать песню с альбомом?

morganney 17.03.2022 14:18

название альбома уникально @morganney

zafer 17.03.2022 14:20

я могу установить action.payload = {album: 'albumname', song: 'songname'}

zafer 17.03.2022 14:34

Я думаю, что редукционный преобразователь соответствует вашему требованию. Проверь это

abhi patil 17.03.2022 14:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
47
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий
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
        ]
      }
    }
  }
}
``````````````````````````````````````````````````

Другие вопросы по теме