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"}
]

Keep in mind you are not "merging" arrays, you are creating a brand new array. It's an important distinction. — kpwahn
– kpwahn, Commented Jan 11, 2018 at 13:56

kpwahn · Accepted Answer · 2018-01-11 14:47:30Z

9

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.

edited Jan 11, 2018 at 14:47

kpwahn

3,0121 gold badge14 silver badges29 bronze badges

answered Jan 11, 2018 at 14:19

jb cazaux

3201 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kpwahn Over a year ago

Does this mutate state?

Farzad Over a year ago

Array.filter also returns a new array. You can just push the newData. No need to use concat. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

jb cazaux Over a year ago

immutability is a state of mind :) use it everywhere, all your code is gonna be easier to read/maintain

Shubham Khatri · Accepted Answer · 2018-01-11 14:08:37Z

3

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

answered Jan 11, 2018 at 14:08

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

4 Comments

Sagiv b.g Over a year ago

you can also write the condition like this: if(!~res.findIndex(book => book.code === data.code )). just saying :)

Shubham Khatri Over a year ago

@Sagivb.g, Thanks for the suggestion, but I prefer it this way, its easier to understand :)

Sagiv b.g Over a year ago

if readability is your concern then i think Array.prototype.includes is way more readable and easy to understand. :)

Sagiv b.g Over a year ago

@Galupuf yup! i mixed it up with Array.prototype.some(). my bad :) if (!res.some(book => book.code === data.code ))

Kent V · Accepted Answer · 2018-01-11 14:13:28Z

0

Merge the two array and filter using 'Code' property

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

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


let newState = [...initialState.booksData, ...data];
newState = newState.filter((obj, pos, arr) => {
    return arr.map(mapObj => mapObj['Code']).indexOf(obj['Code']) !== pos;
});
console.log(newState);

answered Jan 11, 2018 at 14:13

Kent V

5635 silver badges16 bronze badges

Comments

vsync · Accepted Answer · 2020-05-21 12:43:07Z

Collection of Objects

Filter a merged array to pick only non-existent items by iterating every item in the merged array which its index is before the current index of the "parent" filter iterator

const mergedUnique = [
    ...[{id:1}, {id:2}, {id:3}], 
    ...[{id:1}, {id:4}, {id:2}]
  ]
  .filter((item, idx, arr) => 
    !arr.some(({id}, subIdx) => subIdx < idx && id == item.id) 
  )

console.log( mergedUnique )

Basic technique for "simple" arrays

Merge some arrays and filter them to pick only non-existent items by checking if the same item exists anywhere before the current item's index in the merged array.

lastIndexOf is used to check backwards, if the current value exists already, which contributes to keeping the order of the merged array in a certain way which might be desirable, which can only be achieved by checking backward and not forward.

Skip checking the first item - is obviously not a duplicate.

const mergedUniqe = [...[1,2,3], ...[1,3,4,5,2]] // [1, 2, 3, 1, 3, 4, 5, 2]
  .filter((item, idx, arr) => 
    !~arr.lastIndexOf(item, idx-1) || !idx
  )
    
console.log( mergedUniqe )

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

4 Comments

Comments

Collection of Objects

Basic technique for "simple" arrays

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Collection of Objects

Basic technique for "simple" arrays

Comments

Your Answer

Sign up or log in

Post as a guest

Related