update/merge array values in React Redux store correctly without duplicates

Question

My initial state is like below and if new Book added or price is changed then new updated array is coming from service whose result i need to merge in my initial state.

const initialState = {
  booksData: [
    {"Code":"BK01","price":"5"},
    {"code":"BK02","price":"30"},
    {"code":"BK03","price":"332"},
    {"code":"BK04","price":"123"}
  ] 
};

Updated array from server with few records updated/new

data: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},       
  {"code":"BK05","price":"100"}
] 

updated state should become after merging updated array with old array.

booksData: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},
  {"code":"BK03","price":"332"},
  {"code":"BK04","price":"123"},
  {"code":"BK05","price":"100"}
] 

Answer 1

I would filter out elements of the old data that are in the new data, and concat.

const oldBooks = booksData.filter(book => !newData.some(newBook => newBook.code === book.code));
return oldBooks.concat(newData);

Keep in mind you must NOT push values into the old array. In your reducer you MUST create new instances, here a new array. 'concat' does that.

Answer 2

You can first merge both the array together and then reduce it to remove duplicates like

var booksData = [
   {"code":"BK01","price":"5"},
   {"code":"BK02","price":"30"},
   {"code":"BK03","price":"332"},
   {"code":"BK04","price":"123"}
   ] 

var newData = [
   {"code":"BK01","price":"10"},
   {"code":"BK02","price":"25"},       
   {"code":"BK05","price":"100"}
   ] 

const result = [...newData, ...booksData].reduce((res, data, index, arr) => {
  if (res.findIndex(book => book.code === data.code ) < 0) { 
      res.push(data);

  }  
  return res;
}, [])

console.log(result);