javascript - Using immutability-helper with Array, Object, Map - Stack Overflow

admin管理员组

文章数量:1415074

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

Share Improve this question Follow edited Mar 31, 2019 at 1:00 Finlay Beaton asked Mar 31, 2019 at 0:24 Finlay BeatonFinlay Beaton 62066 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22

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

本文标签： javascriptUsing immutabilityhelper with ArrayobjectMapStack Overflow