How do I do simple Create, Update/Modify, Replace, Delete using immutability-helper?

1. If I have an array of simple values?

2. If I have an array of simple objects?

3. If my array is in another object?

4. If I have an object of objects? (hashes, unordered)

5. If I have a Map of objects? (hashes, ordered)

As a beginner, I found the official documentation a bit confusing.

How do I do simple Create, Update/Modify, Replace, Delete using immutability-helper?

1. If I have an array of simple values?

2. If I have an array of simple objects?

3. If my array is in another object?

4. If I have an object of objects? (hashes, unordered)

5. If I have a Map of objects? (hashes, ordered)

As a beginner, I found the official documentation a bit confusing.

• javascript
• reactjs
• immutability-helper

1 Answer 1

You can find the answer for each individual operation in separate questions, but not laid out all together.

1. Array of simple values

import update from 'immutability-helper';

const oldArray = [1, 2, 3];

// add an item
const newArray = update(oldArray, {$push: [6, 7]}); 
// => [1, 2, 3, 6, 7]

// modify an item
const itemIndex = 1; // modify `2` value at index `1`
const newValue = 8;
const newArray = update(oldArray, { [itemIndex]: {$set: newValue} }); 
// => [1, 8, 3]

// remove an item
const itemIndex = 2; // delete `3` value at index `2`
const newArray = update(oldArray, {$splice: [[itemIndex, 1]] }); 
// => [1, 2]

2. Array of simple objects

import update from 'immutability-helper';

const oldArray = [
    {name: 'Stacey', age: 55},
    {name: 'John', age: 77},
    {name: 'Kim', age: 62},
];

// add an item
const newArray = update(oldArray, {$push: [
    {name: 'Trevor', age: 45},
]});

// replace an item
const itemIndex = 1; // replace *John* at index `1`
const newValue = {name: 'Kevin', age: 25};
const newArray = update(oldArray, { [itemIndex]: {$set: newValue} });

// modify an item
const itemIndex = 1; // modify *John* at index `1`
const newArray = update(oldArray, {
    [itemIndex]: {$merge, {
        age: 85, // change John's age to 85
    }}
});         

// remove an item
const itemIndex = 0; // delete *Stacey* at index `0`
const newArray = update(oldArray, {$splice: [[itemIndex, 1]] } });

You can use the builtin findIndex() to find an item's index based on its properties.

3. Array is in another object

import update from 'immutability-helper';

const oldData = {
    city: {       
        people: [
            {name: 'Stacey', age: 55},
            {name: 'John', age: 77},
            {name: 'Kim', age: 62},
        ]
    }
};

// add an item
const newArray = update(oldArray, {
    city: {
        people: {$push: [
            {name: 'Trevor', age: 45},
        ]}
    }
});

// replace an item
const itemIndex = 1; // replace *John* at index `1`
const newValue = {name: 'Kevin', age: 25};
const newArray = update(oldArray, {
    city: {
        people: { 
            [itemIndex]: {$set: newValue} }}
        }
    }
);

// modify an item
const itemIndex = 1; // modify *John* at index `1`
const newArray = update(oldArray, { 
    city: {
        people: {
            [itemIndex]: {$merge, {
                age: 85, // change John's age to 85
            }}
        }
    }
});         

// remove an item
const itemIndex = 0; // delete *Stacey* at index `0`
const newArray = update(oldArray, {
    city: {
        people: {$splice: [[itemIndex, 1]] } 
    }
});

4. Object of objects (hashes, unordered)

import update from 'immutability-helper';

const oldData = {
    'hash-stacey': {name: 'Stacey', age: 55},
    'hash-john': {name: 'John', age: 77},
    'hash-kim': {name: 'Kim', age: 62},
};

// add an item
const newData = update(oldData, {
    ['hash-trevor']: {$set: {name: 'Trevor', age: 45} }
});

// replace an item at a specific hash
const itemHash = 'hash-john';
const newValue = {name: 'Kevin', age: 25};
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// modify an item
const itemHash = 'hash-john';
const newData = update(oldData, {
    [itemHash]: {$merge: {
        age: 85, // change John's age to 85
    }}
});         

// remove an item
const itemHash = 'hash-stacey';
const newData = update(oldData, {$unset: [itemHash] });

Map of objects (hashes, ordered)

import update from 'immutability-helper';

const oldData = new Map([
    ['hash-stacey', {name: 'Stacey', age: 55}],
    ['hash-john', {name: 'John', age: 77}],
    ['hash-kim', {name: 'Kim', age: 62}],
]);

// add an item
const newData = update(oldData, {$add: [
    ['hash-trevor', {name: 'Trevor', age: 45}],
]});

// replace an item at a specific hash
const itemHash = 'hash-john';
const newValue = {name: 'Kevin', age: 25};
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// modify an item
const itemHash = 'hash-john';
/* please edit with better single update $merge or $apply */
const newValue = update(oldData.get(itemHash), {$merge: {
    age: 85, // change John's age to 85
}});
/* typescript needs to do `oldData as any` cast here */
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// remove an item
const itemHash = 'hash-stacey';
const newData = update(oldData, {$remove: [itemHash] });