Immutable.js Nedir?

Read the docs and eat your vegetables.

Immutable.js, değişmez(immutable) bir veri yapısını destekleyen bir kütüphanedir.Bir kez oluşturulduktan sonra değiştirilemez verilerdir saf işlevleri (veri girişi, veri çıkışı) teşvik eder ve kendisini çok daha basit uygulama geliştirmeye , savunma amaçlı kopyalamaya ve basit mantıkla gelişmiş not alma ve değişiklik algılama tekniklerine olanak sağlar. Verileri yerinde güncellemeyen bunun yerine her zaman yeni güncellenmiş veriler sağlayan değişken bir API sunar.

Immutable.js; List, Stack, Map, OrderedMap, Set, OrderedSet ve Record dahil olmak üzere birçok veri yapısı sağlar.

Bu makalemde sizlere immutable.js’in tanımını yaptıktan sonra neden kullanmamız gerektiği, avantajları &dezavantajları,nasıl çalıştığı, paket yüklenmesinive sıkça kullandığım veri yapısı olan map ve listten bahsedeceğim.

Immutable.js’i Neden Kullanırız?

Bir uygulama üzerinde çalışmanın en zor kısımlarından biri, tüm durum değişikliklerini takip etmek ve yapmanız gerekmeyen şeyleri değiştirmediğinizden emin olmaktır. Bu, savunma amaçlı kopyalama ve nesnelerin her yerde değiştirilmesi (büyük olasılıkla) gibi her türlü kötü şeye yol açar.İki yönlü veri bağlama, daha karmaşık uygulamalar geliştirmeye başlayana kadar ilk başta oldukça harika. Bunu yaparsanız, performans sorunlarının yanı sıra bileşenler arasında yukarı ve aşağı aktarılan karışık bir veri karmaşası yaşarsınız. Bu, uygulamanız boyunca veri akışını takip etmeyi çok zorlaştırır.

Bunu jQuery uygulamanızda, Angular uygulamanızda, React’siz bir Redux uygulamasında kullanabilirsiniz.

Avantajları:

• Kod çok daha kısadır (sadece 1 satıra 10 satır).
• Immutable.js ile redüktördeki hangi verilerin değiştiğini ilk bakışta kolayca görebilirsiniz.
• Immutable.js olmadan, neyin değiştiği o kadar gerçek ve açık değildir.
• Bu kitaplığın temel faydaları, redüktörlerin bakımının kolay ve basittir.

Dezavantajları:

• Immutable koleksiyonunu normal .js’ye dönüştürmek için, bir Immutable collection üzerinde .to.js() kullanmanız gerekir. Bu yöntem, performans söz konusu olduğunda çok pahalıdır ve nesnede hiçbir şey değişmemiş olsa bile her zaman bir nesnenin yeni bir referansını döndürür.
• Debugging: Immutable collectionların tarayıcı konsolunda okunması zordur. Ama aracı kullanarak bu sorunu kolayca çözebilirsiniz. Object Formatter tarayıcı eklentisi ancak tüm tarayıcılarda mevcut değildir.
• Regular JavaScript’e pahalı dönüştürme.

Nasıl Çalışır?

Immutable.js Clojure, Scala, Haskell ve diğer işlevsel programlama ortamlarından esinlenmiş ve bu güçlü kavramları JavaScript’e getirmek için tasarlanmıştır ve bu nedenle ES2015 Dizi,map ve heapi yakından yansıtan nesne yönelimli bir API’ye sahiptir.

Immutable koleksiyonların farkı, push, set, unshift veya splice gibi koleksiyonu mutasyona uğratan yöntemlerin bunun yerine yeni bir değişmez koleksiyon döndürmesidir. Slice veya concat gibi yeni diziler döndüren yöntemler, bunun yerine yeni değişmez koleksiyonlar döndürür.

Array üzerindeki yöntemlerin hemen hemen tümü Immutable.List’te, Map’in Immutable.Map’te bulunan yöntemleri ve Immutable.Set’te bulunan Set’inkiler, forEach() ve map() gibi toplama işlemleri de dahil olmak üzere benzer biçimde bulunur.

Immutable.js ile, metotları kullanarak verilerimizi değiştirir ve alırız. Bu, bir nesneye doğrudan veri ayarlamanın veya bir anahtar kullanarak onu almanın normal JavaScript yöntemiyle karşılaştırıldığında oldukça büyük bir değişiklik.

Başlangıçta;

npm kullanarak immutable yükleyin.

npm install immutable

Veya yarn kullanarak yükleyin.

yarn add immutable

TypeScript’i Immutable.js v4 ile kullanma

MAPS

Mapi bir nesne olarak düşünün. Anahtarları kullanarak değerleri depolar. Bir filmin veri yapısını temsil eden bir map oluşturalım. İşleri kendimiz için biraz daha kolaylaştırmak için Immutable.js tarafından sağlanan .fromJS() yöntemini kullanacağız. Bu, belirli bir JS nesnesini Immutable.js temsili olarak döndürür, nesneleri Haritalara ve dizileri Listelere dönüştürür.

READING DATA

İlk olarak, filmin adını alacağız. Bu oldukça kolay;

Immutable.js iç içe verileri ayarlamak/almak için de yöntemler sağlar.Şöyle ki;

Temel olarak, arkasında In olan bir yöntem gördüğünüzde (örneğin .getIn(), .setIn(), .updateIn(), …), argüman olarak bir anahtar veya anahtar yolu alan bir yöntemdir. Anahtar yolu genellikle ilgilendiğiniz verilere giden yolu içeren bir dizidir. Bu anahtarlar normal anahtarlar veya dizinler olabilir.

MODIFYING DATA

Oyuncumuzun adını ‘Ryan’ olarak değiştirelim. Daha önce verileri alırken yaptığımız gibi, işleri biraz daha okunabilir kılmak için bir anahtar yol kullanacağız. .setIn() iki parametre alır: birincisi bir anahtar yolu (veya sadece bir anahtar) ve ikincisi, o anahtar veya anahtar yolunda ayarlamak istediğiniz değerdir.

setIn() kök değeri değiştirmiştir.Bu durumda film verilerimiz ve güncellenmiş oyuncu ile yeni bir değer döndürmüştür. Yeni verilerin döndürüldüğünü ve orijinal değerimizde değiştirilmediğini unutmayın. Oyuncunun soyadını film değişkenimizde okusaydık yine ‘Leanardo’ olurdu. Filmi güncellemek için, işlemin güncellenmiş sonucunu değişkeninize atamanız gerekir:

.merge(), .delete(), .update() ve diğerleri gibi bir dizi başka yöntem vardır.

Lists

Listeleri standart JavaScript dizilerine benzer olarak düşünün. Sıralanır ve indekslenir. Bir Liste ile, .push(), .pop(), .unshift() gibi işlemlere ve diğer birçok dizi benzeri yönteme erişebiliriz. 4 mağazanın fiyatlarını içeren bir liste ve türler tanıtarak kitap verilerimizi biraz daha ilginç hale getirelim:

READING DATA

Bir Listedeki bir indeksin (yani bir anahtarın) değerini elde etmek için .get() veya .getIn() yöntemlerini kullanırsınız:

Anahtar yolundaki anahtarları ve dizinleri karıştırıp eşleştirebileceğimizi unutmayın, bu nedenle istediğimiz yönetmenin adını almak için şu anahtar yolunu kullanırdık:

Immutable.js koleksiyonları .update() yöntemine sahiptir. İki bağımsız değişken alır: bir anahtar (veya .updateIn() durumunda bir anahtar yolu) ve bir güncelleyici işlevi. Güncelleyici işlevi temel olarak, değeri güncellediğimiz bir parametre olarak iletilen değeri (.map() ve .forEach() gibi yöntemlere benzer) alan bir işlevdir. Bizim durumumuzda, başka bir türü Listeye göndererek güncelleyeceğimiz türlere erişimimiz olacak:

MODIFYING DATA

Kısaca: immutable.js sayesinde uygulamanız daha verimli, geliştirmesi, bakımı daha kolay ve hatalara karşı daha dayanıklı olacaktır.

Kaynakça:

Immutable.js

https://grapeup.com/blog/benefits-of-using-immutable-js-with-react-redux-apps/