Merge two arrays, avoiding duplicates using immutable pattern in redux

Question

Let's say I have two arrays:

let A = [a,b,c,d]
let B = [c,d,e]

where each of the letters is an object that has several properties, one of which is an id which is unique in my domain. The merged result would then be

[a,b,c,d,e]

where [c,d] originate from B.

Using an elegant approach, how would I merge these two arrays in a way that any element in B would overwrite any existing one in A and all others remain untouched. So it's a union with B elements taking precedence in case of a conflict.

I have two ideas (using ES6 and lodash):

//remove same elements first, then join arrays
let ids = new Set(B.map(e => e.id));
let newState = _.reject(A, constraint => ids.has(constraint.id));
return newState.concat(B);

//convert both to hashmap, join, then take values
let B_map = _.keyBy(B, 'id');
let A_map = _.keyBy(A, 'id');
return {...A_map, ...B_map}.values();

Is there a shorter / more concise / more readable version? Maybe one without external dependencies? I'm essentially looking for something like

$\text{joined} = A \setminus (A\cap B) \cup B$

Where equality between any element is defined by the id property (or a comparator function in v2).

or are you asking for the result to be [a,b,c,d] where c,d are from B? — sellmeadog
– sellmeadog, Commented Dec 12, 2018 at 17:29

slider · Accepted Answer · 2018-12-12 17:21:45Z

4

Without external dependencies, you can use filter to extract elements from A that don't have ids in B and concat that with B:

const A = [{id: 1, name: 'x'}, {id: 2, name: 'y'}, {id: 3, name: 'z'}];
const B = [{id: 2, name: 'hello'}];

let ids = new Set(B.map(e => e.id));
let newState = A.filter(a => !ids.has(a.id)).concat(B);

console.log(newState);

answered Dec 12, 2018 at 17:21

slider

13.1k1 gold badge29 silver badges45 bronze badges

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

2 Comments

pascalwhoop Over a year ago

I chose this answer as it is using only 2 instead of 1 line with vanilla javascript. However, Ibrahims is the most appropriate when considering that I use lodash. Thanks!

Tristan Heilman Over a year ago

I posted another solution that follows the more redux styled approach.

ibrahim mahrir · Accepted Answer · 2018-12-12 17:42:43Z

3

Since you are already using lodash, you can use _.unionBy which merges the arrays using a criterion by which uniqueness is computed:

let result = _.unionBy(B, A, "id");

Start with B before A, so that in case of duplicates, B values are taken instead of A ones.

Example:

let A = [
  { id: "a", arr: "A" },
  { id: "b", arr: "A" },
  { id: "c", arr: "A" },
  { id: "d", arr: "A" }
];

let B = [
  { id: "b", arr: "B" },
  { id: "d", arr: "B" }
];

let result = _.unionBy(B, A, "id");

console.log(result);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Note: This messes up the order of the items, the duplicates come first, then the rest.

edited Dec 12, 2018 at 17:42

answered Dec 12, 2018 at 17:36

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

1 Comment

pascalwhoop Over a year ago

This one-liner is actually what I discovered today, a day later. I guess there are going to be two right answers. This one and the one by @slider who offers a vanilla solution.

Ori Drori · Accepted Answer · 2018-12-12 18:58:28Z

0

Use lodash's _.differenceBy(A, B) to remove all items that exist in B from A, and then combine with B items. This will preserve the order of A items before B items.

const A = [{"id":"a","arr":"A"},{"id":"b","arr":"A"},{"id":"c","arr":"A"},{"id":"d","arr":"A"}];

const B = [{"id":"c","arr":"B"},{"id":"d","arr":"B"}];

const result = [..._.differenceBy(A, B, 'id'), ...B];

console.log(result);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

answered Dec 12, 2018 at 18:58

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

2 Comments

pascalwhoop Over a year ago

Good, but the unionBy seems to be a tad more intuitive, as it creates a union with duplicates removed by an iteratee.

Ori Drori Over a year ago

The order of the Union is the problem - B before A.

Tristan Heilman · Accepted Answer · 2020-12-18 06:48:00Z

0

Here is a solution that follows more of the redux styled approach...

// imported redux actions (these are simply strings)
import {
    SOME_DEFINED_ACTION_CASE
} from '../actions/someActions';

const initialState = {
    reduxList: []
}

// reducer function
export default function someReducer(state = initialState, action) {
    switch (action.type) {
        case SOME_DEFINED_ACTION_CASE: {
            let ids = new Set(action.payload.map(e => e.id));
            let newState = state.reduxList.filter(a => !ids.has(a.id)).concat(action.payload);
            return Object.assign({}, state, {
                reduxList: newState
            });
        }
    }
}

answered Dec 18, 2020 at 6:48

Tristan Heilman

3281 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

Merge two arrays, avoiding duplicates using immutable pattern in redux

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related