Рубрики
Без рубрики

Immutablejs для разработчиков реагирования

Immutable.js играет жизненно важную роль в состоянии неможуемости реакции и приложения Redux. В этой статье мы увидим Immutable.js для разработчиков REVENTJS. Теги с ShowDev, учебником, реагированием, JavaScript.

В этой статье мы увидим, что такое неизменность и почему важно для приложений реагирования. Это объясняет immutable.js для rectjs Разработчики

Что такое неизменность

По словам Википедии,

In object-oriented and functional programming, an immutable object . It is an object whose state cannot be modified after it is created. This is in contrast to a mutable object (changeable object), which can be modified after it is created.

Неизмермость – это то, что не может быть изменен после того, как он создан Отказ Неизменный объект не может быть изменен после его создания.

Например, скажем, у нас есть постоянная переменная в JavaScript.

const getValue = "Some Value"

Мы не можем изменять постоянную переменную после назначения. Это бросит ошибку. Это неизменность

getValue = "Change Value"

Почему неизменность важна?

Давайте понять эту концепцию с аналогией. Допустим, вы экономите деньги на вашем банковском счете. Прежде всего, вы хотите проанализировать, как много вы экономите каждый месяц. Поэтому, чтобы проанализировать это, вам нужно отслеживать ваши предыдущие месяцы сбережения.

Если у вас нет истории сбережения, было бы трудно отслеживать запись. То есть для некоторого комплексного применения реагирования нам нужно поддерживать состояние применения, такое как предыдущее состояние, а то текущее состояние. Так что мы можем рендерировать, обрабатывать событие с изменениями.

Цель redux.

Чтобы решить эту проблему, Redux вступает в игру. Но существует еще одна проблема. Хотя Redux решает проблему управления состоянием.

Но управление неизменностью данных зависит от нас. Например, Если у нас есть ценность, как

item = {
 "id" : 1,
  "name" : "Ganesh"
}

Redux поддерживает предыдущее состояние и текущее состояние. Но мы все еще можем изменить значение в объекте. Это смежный объект. Это проблема.

Сделать структуру данных, неизменную в JavaScript. Immutable.js входит в игру.

Введение в Immutable.js.

Immutable.js предоставляет множество постоянных неизменных структур данных, в том числе: Список , Стек , Карта , Underedmap С Установить , Упорядоченный и Запись Отказ

Давайте посмотрим, как мы можем реализовать Immutable.js в приложении React/Redux.

Я предполагаю, что вы знакомы с React и Redux. Если вы новичок для реагирования и Redux, вы можете обратиться в эти отличные статьи.

Immutable.js Используется для инициализации состояния в неизменной структуре данных. В файле редуктора инициализируйте состояние с неизменным объектом и во всех действиях, редуктор создаст новый экземпляр существующие данные.

Есть три важных структура данных в Immutable.js

  • Потенциал это набор записей ключа/значения, которые могут быть итерацией (например, использование .map () , .фильтр () , .уменьшать () , …). Все коллекции в Immutable.js, как карта и Список , используйте Потенциал в качестве базового класса
  • Карта – Подумай о карта как объект. Он хранит значения, используя клавиши. Давайте создадим Карта Это представляет структуру данных книги в интернет-магазине. Чтобы сделать вещи немного легче для себя, мы будем использовать .FROMJS. () Метод, предоставленный Immutable.js
  • Список – список похож на массив JavaScript. Они упорядочены и проиндексированы. Мы можем выполнять такие операции, как. POP () и .unshift () Также как операции массива JavaScript

Читать и изменять данные на карте

В основном, читать данные в Immutable.js. Нам нужно получить данные из массива (или) объект

Чтение данных

state.get('items').get('title')

В основном, чтобы получить вложенный объект. Мы должны идти с верхнего уровня до уровня, который мы хотим получить значение. Это будет громоздким, чтобы получить вложенный объект. Чтобы упростить эту структуру, мы можем использовать что-то вроде этого

state.getIn(['items','title'])

Оба вернутся одинаковое значение. Позже будет простым и читаемым, чем прежний.

Изменение данных

state.setIn(['items','title'],'Hola')

Изменение данных похоже на чтение данных. Только разница вот нам нужно использовать Ститан вместо Получить , Залезай

Чтение и изменение данных в списках

Список в Immutable.js аналогичен стандартным массивам JavaScript. Они упорядочены и проиндексированы. Мы можем получить доступ к списку с помощью таких операций, как . купить () , оздоровительный () и .unshift ()

state.getIn(['items',1])

Мы также можем получить доступ к списку с индексом

state.getIn(['items',0,'test'])

Изменение данных в списках

Это похоже на изменение данных на карте. В дополнение к этому, мы можем изменить данные с индексом.

state = state.setIn(['items', 0], 'Fantasy');

Между тем, Immutable.js также имеет другие способы изменить данные в списках. Они .Обновить () и .updatein. () . Они намного проще и читаются по сравнению с .набор () и .etin. ()

state = state.update('items', items => items.push('Wizards'));

Например, давайте представимся на секунду, что нам нужно будет обновить цену Amazon до 6,80 долл. США. Это может быть сделано с использованием .etin. () и правильный ключевой путь

state = state.setIn(['storeListings', 0, 'price'], 6.80);

Однако мы обычно не знаем индекса, который мы хотим обновить. Чтобы решить эту проблему, используя .findindex. ()

const indexOfListingToUpdate = state.get('storeListings').findIndex(item => {
  return item.get('id') === 'amazon';
});
state = state.setIn(['storeListings', indexOfListingToUpdate, 'price'], 6.80);

Тем временем, чтобы узнать больше о Immutable.js для REVENTJS.

Подробнее о веб-разработке –

Оригинал: “https://dev.to/ganeshmani/immutablejs-for-react-developers-2g5”

Читайте ещё по теме: