This module is an extension of immutability-helper.
With yarn:
yarn add immutability-helper immutability-helper-extensions
With npm:
npm i --save immutability-helper immutability-helper-extensions
To import an extension, you just have to import it:
const update = require("immutability-helper");
require("immutability-helper-extensions/find");
// $find is loaded in the rest of the codebaseAnd if you want to import everything:
const update = require("immutability-helper");
require("immutability-helper-extensions");$find: find every element of an array that matches the selection and update it$delete: remove every elements of an array that matches the selection$insertAfter: find every element of an array that matches the selection and add after them a new element$insertBefore: find every element of an array that matches the selection and add before them a new element$deleteAfter: find every element of an array that matches the selection and remove the firsts elements after them$deleteBefore: find every element of an array that matches the selection and remove the firsts elements before them
When you want to select an element in any of those functions, under the hood lodash's iteratee is used.
const users = [{ user: "barney", age: 36, active: true }, { user: "fred", age: 40, active: false }];
// Any function
users.filter(_.iteratee(u => u.active));
// => [{ 'user': 'barney', 'age': 36, 'active': true }]
// The `_.matches` iteratee shorthand.
users.filter(_.iteratee({ user: "barney", active: true }));
// => [{ 'user': 'barney', 'age': 36, 'active': true }]
// The `_.matchesProperty` iteratee shorthand.
users.filter(_.iteratee(["user", "fred"]));
// => [{ 'user': 'fred', 'age': 40 }]
// The `_.property` iteratee shorthand.
users.map(_.iteratee("user"));
// => ['barney', 'fred']const state = {
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
};
const updatedState = update(state, {
users: {
// $find: [selection, mutation]
$find: [{ user: "barney" }, { age: { $set: 35 } }]
}
});
/*
{
users: [
{ user: "barney", age: 35, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
}
*/const state = {
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
};
const updatedState = update(state, {
users: {
// $delete: selection
$delete: { user: "barney" }
}
});
/*
{
users: [
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
}
*/const state = {
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
};
const updateState = update(state, {
users: {
// $insertAfter: [selection, element]
$insertAfter: [{ active: true }, { user: "rodrigo", age: 40, active: false }]
}
});
/*
{
users: [
{ user: "barney", age: 36, active: true },
{ user: "rodrigo", age: 40, active: false },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true },
{ user: "rodrigo", age: 40, active: false }
]
}
*/const state = {
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
};
const updateState = update(state, {
users: {
// $insertBefore: [selection, element]
$insertBefore: [{ active: true }, { user: "rodrigo", age: 40, active: false }]
}
});
/*
{
users: [
{ user: "rodrigo", age: 40, active: false },
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "rodrigo", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
}
*/const state = {
users: [
{ user: "barney", age: 36, active: true },
{ user: "rodrigo", age: 48, active: false },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true },
{ user: "rodrigo", age: 48, active: false }
]
};
const updatedState = update(state, {
users: {
// $deleteAfter: selection
$deleteAfter: { active: true }
}
});
/*
{
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
}
*/const state = {
users: [
{ user: "rodrigo", age: 48, active: false },
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "rodrigo", age: 48, active: false },
{ user: "pebbles", age: 1, active: true }
]
};
const updatedState = update(state, {
users: {
// $deleteBefore: selection
$deleteBefore: { active: true }
}
});
/*
{
users: [
{ user: "barney", age: 36, active: true },
{ user: "fred", age: 40, active: false },
{ user: "pebbles", age: 1, active: true }
]
}
*/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent