Как изменить существующие данные в редукторе?

Question

Я новичок в Reaction-Redux, я работал над учебником и хотел добавить несколько своих функций. Как добавить новый метод для добавления новой песни в существующий массив объектов песни> Я был сбит с толку, потому что в композиционных редукторах уже есть ключ песни. Что я должен вернуть / передать в качестве параметра для добавления новой песни?

import { combineReducers } from "redux";

const songsReducer = () => {
  return [
    {
      title: "song one",
      duration: "4:30"
    },
    {
      title: "song one",
      duration: "4:00"
    },
    {
      title: "song one",
      duration: "3:28"
    },
    {
      title: "song one",
      duration: "3:50"
    }
  ];
};

const selectedSongReducer = (selectedSong = null, action) => {
  if (action.type === "SONG_SELECTED") {
    return action.payload;
  }
  return selectedSong;
};

**const addSong = () => {};**   // need help with this function

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

Answer 1

const addSong = song => ({
  type: 'ADD_SONG',
  payload: song,
});

const songsReducer = (songs = [], action) => {
  switch (action.type) {
    case 'ADD_SONG': {
      return [...songs, action.payload.song]; //immutable
    }
    default: {
      return [
        {
          title: 'song one',
          duration: '4:30',
        },
        {
          title: 'song one',
          duration: '4:00',
        },
        {
          title: 'song one',
          duration: '3:28',
        },
        {
          title: 'song one',
          duration: '3:50',
        },
      ];
    }
  }
};

Answer 2

Всегда используйте коммутатор для чистого кода и возвращайте как этот return [...selectedSong, action.payload];, чтобы избежать мутации

const addSong = (song) => {
   return {
      type: "ADD_SONG",
      payload: {
         song
      }
   }
}

const selectedSongReducer = (selectedSong = [], action) => {
 switch (action.type) {
    case 'SONG_SELECTED': {
      return [...selectedSong, action.payload.song];
    }
    default: null
   }
};

const songsReducer = (song = [], action) => {
 switch (action.type) {
    case 'ADD_SONG': {
      return [...songs, action.payload.song];
    }
    default: {
      return [
        {
          title: 'song one',
          duration: '4:30',
        },
        {
          title: 'song one',
          duration: '4:00',
        },
        {
          title: 'song one',
          duration: '3:28',
        },
        {
          title: 'song one',
          duration: '3:50',
        },
      ];
    }
  }
};

Answer 3

Действие вернет песню типа ADD_SONG:

const addSong = (song) => {
   return {
      type: "ADD_SONG",
      payload: {
         song
      }
   }
}

В редукторе:

const selectedSongReducer = (selectedSong = [], { type, payload = {} }) => {
  if (type === "SONG_SELECTED") {
    return payload;
  }
  if (type === "ADD_SONG") {
     return [...selectedSong].push(payload.song) // Imutable selectedSong
  }
  return selectedSong;
};