Я только начал изучать избыточность, и мне нужна помощь, как удалить элемент из массива состояний.

Question

У меня есть список песен, которые при нажатии кнопки показывают детали.Теперь я хочу нажать на другую кнопку, чтобы удалить показанные детали.Функция удалить описаниеReducer.Я показываю мой файл редукторов.

redurs.js

import { combineReducers } from 'redux';

const songsReducer = () =>{
  return [
    { title: 'No Scrubs', duration: '4:05'},
    { title: 'Macarena', duration: '3:55'},
    { title: 'All Stars', duration: '1:28'},
    { title: 'I want it that way', duration: '2:05'},

  ];
};



const selectedSongReducer = (selectedSong=null, action) => {

  if(action.type === 'SONG_SELECTED'){
    return action.payload;
  }

  return selectedSong;

}



const removeDescriptionReducer = (removeDescription=null, action) => {

    if(action.type === 'REMOVE_DESCRIPTION'){
    alert (action.payload);
  }

  return removeDescription;

}

export default combineReducers({
  songs: songsReducer,
  selectedSong: selectedSongReducer,
  removeDescription: removeDescriptionReducer
});

Answer 1

Согласно заголовку вопроса, вы хотите удалить элемент из состояния:

return state.filter(elem => elem.title == 'xyx')

или

return state.filter(elem => elem.title == payload.title)

это вернет все элементы, кроме того, которое соответствует указанному условию

где xyz может быть заголовком в полезной нагрузке

в вашем коде:

const removeDescriptionReducer = (removeDescription = null, action) => {

  if (action.type === 'REMOVE_DESCRIPTION') {
    alert(action.payload);
    return songsReducer.filter(song => song.title == action.payload.title);
  }

  return removeDescription;

}

Кроме того, не хочу вас обескураживать, но ваш редуктор должен выглядеть так:

const songs = () => {
  return [{
      title: 'No Scrubs',
      duration: '4:05'
    },
    {
      title: 'Macarena',
      duration: '3:55'
    },
    {
      title: 'All Stars',
      duration: '1:28'
    },
    {
      title: 'I want it that way',
      duration: '2:05'
    },

  ];
};


const songsReducer = (state = songs, action) => {
  switch(action.type) {
    case 'ALL_SONGS':
      return state;
    case 'SONG_SELECTED':
      return action.payload;
    case 'REMOVE_DESCRIPTION':
        return state.filter(song => song.title == action.payload.title);
      default:
        return state;
  }
}

и, следовательно, вам не нужно создавать разные редукторы для выполнения разных операций.