How to modify existing data in reducer?

user_11590159 0
Viewed 60

I'm new to react-redux, I was working on a tutorial and I wanted to add a few features of my own. How do I add a new method to add a new song to the existing array of song objects > I was confused because theres already a song key in combine reducers. What should I return/pass as a parameter to add a new song?

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
});
react-redux redux reactjs
3 Answers
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',
        },
      ];
    }
  }
};
user_54560710

The action will return a song with type ADD_SONG:

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

In reducer:

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

Always use switch case for cleaner code and return like this return [...selectedSong, action.payload]; to avoid mutation

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',
        },
      ];
    }
  }
};
user_59562540
Related