Как обновить элемент внутри списка с помощью ImmutableJS?

Вот что сказали официальные документы

updateIn(keyPath: Array<any>, updater: (value: any) => any): List<T>
updateIn(keyPath: Array<any>, notSetValue: any, updater: (value: any) => any): List<T>
updateIn(keyPath: Iterable<any, any>, updater: (value: any) => any): List<T>
updateIn(keyPath: Iterable<any, any>, notSetValue: any, updater: (value: any) => any): List<T>

Нормальный веб-разработчик (не функциональный программист) не может этого понять!

У меня довольно простой (для нефункционального подхода) случай.

var arr = [];
arr.push({id: 1, name: "first", count: 2});
arr.push({id: 2, name: "second", count: 1});
arr.push({id: 3, name: "third", count: 2});
arr.push({id: 4, name: "fourth", count: 1});
var list = Immutable.List.of(arr);

Как я могу обновить , listгде элемент с именем третьего иметь счета набор на 4 ?

Наиболее подходящий случай использовать как findIndexи updateметоду.

list = list.update(
  list.findIndex(function(item) { 
    return item.get("name") === "third"; 
  }), function(item) {
    return item.set("count", 4);
  }
); 

PS Не всегда можно использовать Карты. Например, если имена не уникальны, и я хочу обновить все элементы с одинаковыми именами.

С .setIn () вы можете сделать то же самое:

let obj = fromJS({
  elem: [
    {id: 1, name: "first", count: 2},
    {id: 2, name: "second", count: 1},
    {id: 3, name: "third", count: 2},
    {id: 4, name: "fourth", count: 1}
  ]
});

obj = obj.setIn(['elem', 3, 'count'], 4);

Если мы не знаем индекс записи, которую хотим обновить. Найти его довольно просто с помощью .findIndex () :

const indexOfListToUpdate = obj.get('elem').findIndex(listItem => {
  return listItem.get('name') === 'third';
});
obj = obj.setIn(['elem', indexOfListingToUpdate, 'count'], 4);

Надеюсь, поможет!

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

объяснение

Обновление коллекций Immutable.js всегда возвращает новые версии этих коллекций, оставляя исходную неизменной. Из-за этого мы не можем использовать list[2].count = 4синтаксис мутации JavaScript . Вместо этого нам нужно вызывать методы, как и в случае с классами коллекций Java.

Начнем с более простого примера: просто счетчики в списке.

var arr = [];
arr.push(2);
arr.push(1);
arr.push(2);
arr.push(1);
var counts = Immutable.List.of(arr);

Теперь , если мы хотим , чтобы обновить 3 - й пункт, простой массив JS может выглядеть следующим образом : counts[2] = 4. Поскольку мы не можем использовать мутацию и должны вызвать метод, вместо этого мы можем использовать: counts.set(2, 4)- это означает установить значение 4в индексе 2.

Глубокие обновления

Однако в приведенном вами примере есть вложенные данные. Мы не можем просто использовать set()исходную коллекцию.

Коллекции Immutable.js имеют семейство методов с именами, оканчивающимися на «In», которые позволяют вносить более глубокие изменения во вложенный набор. Наиболее распространенные методы обновления имеют связанный метод «In». Например, setесть setIn. Вместо того, чтобы принимать индекс или ключ в качестве первого аргумента, эти методы «In» принимают «путь ключа». Ключевой путь - это массив индексов или ключей, который показывает, как добраться до значения, которое вы хотите обновить.

В вашем примере вы хотели обновить элемент в списке с индексом 2, а затем значение в ключе «count» в этом элементе. Так что ключевой путь будет [2, "count"]. Второй параметр setInметода работает так же set, как новое значение, которое мы хотим поместить туда, поэтому:

list = list.setIn([2, "count"], 4)

Поиск правильного ключевого пути

Сделав еще один шаг, вы на самом деле сказали, что хотите обновить элемент, имя которого - «три», что отличается от просто 3-го элемента. Например, может быть, ваш список не отсортирован, или, возможно, элемент с именем «два» был удален ранее? Это означает, что сначала нам нужно убедиться, что мы действительно знаем правильный путь ключа! Для этого мы можем использовать findIndex()метод (который, кстати, работает почти так же, как Array # findIndex ).

Как только мы нашли индекс в списке, в котором есть элемент, который мы хотим обновить, мы можем предоставить ключевой путь к значению, которое мы хотим обновить:

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

NB: SetvsUpdate

В исходном вопросе упоминаются методы обновления, а не установленные методы. Я объясню второй аргумент этой функции (называемой updater), поскольку он отличается от set(). В то время как второй аргумент set()- это новое значение, которое мы хотим, второй аргумент update()- это функция, которая принимает предыдущее значение и возвращает новое значение, которое мы хотим. Тогда updateIn()это вариант «In», update()который принимает ключевой путь.

Скажем, например, нам нужен вариант вашего примера, который не просто устанавливает счетчик 4, но вместо этого увеличивает существующий счетчик, мы могли бы предоставить функцию, которая добавляет единицу к существующему значению:

var index = list.findIndex(item => item.name === "three")
list = list.updateIn([index, "count"], value => value + 1)

Вот что сказали официальные документы ... updateIn

Вам не нужно updateIn, это только для вложенных структур. Вы ищете updateметод с гораздо более простой подписью и документацией:

Возвращает новый список с обновленным значением по индексу с возвращаемым значением вызывающего средства обновления с существующим значением или notSetValue, если индекс не был установлен.

update(index: number, updater: (value: T) => T): List<T>
update(index: number, notSetValue: T, updater: (value: T) => T): List<T>

что, как предполагается в Map::updateдокументации , " эквивалентно:list.set(index, updater(list.get(index, notSetValue))) ".

где элемент с именем "третий"

Списки работают не так. Вы должны знать индекс элемента, который хотите обновить, или вам нужно искать его.

Как я могу обновить список, в котором для элемента с третьим именем установлено значение 4?

Это должно сделать это:

list = list.update(2, function(v) {
    return {id: v.id, name: v.name, count: 4};
});

Используйте .map ()

list = list.map(item => 
   item.get("name") === "third" ? item.set("count", 4) : item
);

var arr = [];
arr.push({id: 1, name: "first", count: 2});
arr.push({id: 2, name: "second", count: 1});
arr.push({id: 3, name: "third", count: 2});
arr.push({id: 4, name: "fourth", count: 1});
var list = Immutable.fromJS(arr);

var newList = list.map(function(item) {
    if(item.get("name") === "third") {
      return item.set("count", 4);
    } else {
      return item;
    }
});

console.log('newList', newList.toJS());

// More succinctly, using ES2015:
var newList2 = list.map(item => 
    item.get("name") === "third" ? item.set("count", 4) : item
);

console.log('newList2', newList2.toJS());

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>

Мне очень нравится этот подход с сайта thomastuts :

const book = fromJS({
  title: 'Harry Potter & The Goblet of Fire',
  isbn: '0439139600',
  series: 'Harry Potter',
  author: {
    firstName: 'J.K.',
    lastName: 'Rowling'
  },
  genres: [
    'Crime',
    'Fiction',
    'Adventure',
  ],
  storeListings: [
    {storeId: 'amazon', price: 7.95},
    {storeId: 'barnesnoble', price: 7.95},
    {storeId: 'biblio', price: 4.99},
    {storeId: 'bookdepository', price: 11.88},
  ]
});

const indexOfListingToUpdate = book.get('storeListings').findIndex(listing => {
  return listing.get('storeId') === 'amazon';
});

const updatedBookState = book.setIn(['storeListings', indexOfListingToUpdate, 'price'], 6.80);

return state.set('book', updatedBookState);

Вы можете использовать map:

list = list.map((item) => { 
    return item.get("name") === "third" ? item.set("count", 4) : item; 
});

Но это будет повторяться по всей коллекции.