Immer ile Daha İyi Redüktörler

Bir React geliştiricisi olarak, durumun doğrudan mutasyona uğramaması gerektiği ilkesine zaten aşina olmalısınız. Bunun ne anlama geldiğini merak ediyor olabilirsiniz (çoğumuz başladığımızda bu kafa karışıklığını yaşadı).

Bu öğretici bunun hakkını verecektir: değişmez durumun ne olduğunu ve buna duyulan ihtiyacı anlayacaksınız. Ayrıca değişmez durumla çalışmak için Immer'ı nasıl kullanacağınızı ve onu kullanmanın faydalarını öğreneceksiniz. Bu makaledeki kodu bu Github deposunda bulabilirsiniz.

JavaScript'te Değişmezlik ve Neden Önemlidir?

Immer.js, belirtilen misyonu "değişmez durumla daha uygun bir şekilde çalışmanıza" izin vermek olan Michel Weststrate tarafından yazılmış küçük bir JavaScript kitaplığıdır.

Ancak Immer'a dalmadan önce, JavaScript'teki değişmezlik ve bunun bir React uygulamasında neden önemli olduğu hakkında hızlı bir bilgi tazeleyelim.

En son ECMAScript (aka JavaScript) standardı, dokuz yerleşik veri türünü tanımlar. Bu dokuz türden altı tanesi primitive değerler/türler olarak adlandırılır. Bu altı temel undefined , number , string , boolean , bigint ve symbol . JavaScript'in typeof operatörüyle yapılan basit bir kontrol, bu veri türlerinin türlerini ortaya çıkaracaktır.

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

primitive , nesne olmayan ve yöntemi olmayan bir değerdir. Mevcut tartışmamız için en önemli şey, bir ilkel değerinin bir kez oluşturulduktan sonra değiştirilemeyeceği gerçeğidir. Bu nedenle, ilkellerin immutable olduğu söylenir.

Kalan üç tür null , object ve function . Ayrıca typeof operatörünü kullanarak türlerini de kontrol edebiliriz.

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

Bu türler mutable . Bu, değerlerinin oluşturulduktan sonra herhangi bir zamanda değiştirilebileceği anlamına gelir.

[0, 1] dizisinin neden yukarıda olduğunu merak ediyor olabilirsiniz. JavaScriptland'de bir dizi, yalnızca özel bir nesne türüdür. Ayrıca null hakkında merak ediyorsanız ve bunun undefined ne kadar farklı olduğunu merak ediyorsanız. undefined basitçe, bir değişken için bir değer ayarlamadığımız anlamına gelirken, null nesneler için özel bir durumdur. Bir şeyin nesne olması gerektiğini biliyorsanız ancak nesne orada değilse, basitçe null değerini döndürürsünüz.

Basit bir örnekle açıklamak için aşağıdaki kodu tarayıcı konsolunuzda çalıştırmayı deneyin.

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.match , bir object türü olan bir dizi döndürmelidir. Böyle bir nesne bulamadığında null döndürür. undefined döndürmek burada da mantıklı olmaz.

Yeter artık. Değişmezliği tartışmaya dönelim.

MDN belgelerine göre:

“Nesneler dışındaki tüm türler değişmez değerler (yani değiştirilemeyen değerler) tanımlar.”

Bu ifade, özel bir JavaScript nesnesi türü oldukları için işlevleri içerir. Buradaki fonksiyon tanımına bakın.

Değişebilir ve değişmez veri türlerinin pratikte ne anlama geldiğine hızlıca bir göz atalım. Aşağıdaki kodu tarayıcı konsolunuzda çalıştırmayı deneyin.

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

Sonuçlarımız, b'nin a "türetilmiş" olmasına rağmen, b değerini değiştirmenin b değerini etkilemediğini a . Bunun nedeni, JavaScript motorunun b = a ifadesini çalıştırdığında, yeni, ayrı bir bellek konumu oluşturması, buraya 5 koyması ve bu konumda b göstermesi gerçeğinden kaynaklanmaktadır.

Peki ya nesneler? Aşağıdaki kodu göz önünde bulundurun.

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

name özelliğini d değişkeni aracılığıyla değiştirmenin, onu c de değiştirdiğini görebiliriz. Bu, JavaScript motoru c = { name: 'some name ' } ifadesini çalıştırdığında, JavaScript motorunun bellekte bir boşluk oluşturması, nesneyi içine koyması ve c işaret etmesi gerçeğinden kaynaklanır. Ardından, d = c ifadesini çalıştırdığında, JavaScript motoru yalnızca d yi aynı konuma işaret eder. Yeni bir bellek konumu oluşturmaz. Bu nedenle, d deki öğelerde yapılan herhangi bir değişiklik, örtük olarak c öğeler üzerinde bir işlemdir. Çok fazla çaba harcamadan, bunun neden yapımda sorun olduğunu görebiliriz.

Bir React uygulaması geliştirdiğinizi ve bir yerde c değişkeninden okuyarak kullanıcının adını some name ad olarak göstermek istediğinizi hayal edin. Ancak başka bir yerde, d nesnesini değiştirerek kodunuza bir hata eklemiştiniz. Bu, kullanıcının adının new name olarak görünmesine neden olur. c ve d ilkel olsaydı bu sorunu yaşamazdık. Ancak ilkeller, tipik bir React uygulamasının sürdürmesi gereken durum türleri için çok basittir.

Bu, uygulamanızda değişmez bir durumu korumanın önemli olmasının başlıca nedenleri ile ilgilidir. Immutable.js README'deki bu kısa bölümü okuyarak birkaç diğer hususa göz atmanızı tavsiye ederim: değişmezlik durumu.

Bir React uygulamasında neden değişmezliğe ihtiyacımız olduğunu anladıktan sonra, şimdi Immer'ın produce işleviyle sorunu nasıl çözdüğüne bir göz atalım.

Immer'ın produce İşlevi

Immer'ın çekirdek API'si çok küçüktür ve üzerinde çalışacağınız ana işlev produce işlevidir. produce yalnızca bir başlangıç ​​durumu ve durumun nasıl mutasyona uğratılması gerektiğini tanımlayan bir geri arama alır. Geri aramanın kendisi, amaçlanan tüm güncellemeleri yaptığı durumun bir taslak (aynı, ancak yine de bir kopyası) kopyasını alır. Son olarak, uygulanan tüm değişikliklerle yeni, değişmez bir durum produce .

Bu tür bir durum güncellemesi için genel kalıp şudur:

 // produce signature produce(state, callback) => nextState

Bunun pratikte nasıl çalıştığını görelim.

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

Yukarıdaki kodda, sadece başlangıç ​​durumunu ve mutasyonların nasıl olmasını istediğimizi belirten bir geri aramayı iletiyoruz. Bu kadar basit. Devletin başka bir yerine dokunmamıza gerek yok. initState dokunulmadan bırakır ve devletin, başlangıç ​​ve yeni durumlar arasında dokunmadığımız kısımlarını yapısal olarak paylaşır. Eyaletimizde böyle bir parça pets dizisidir. Üretim d produce , yaptığımız değişikliklerin yanı sıra değiştirmediğimiz nextState da içeren değişmez bir durum ağacıdır.

Bu basit ama faydalı bilgilerle donanmış olarak, produce React redüktörlerimizi basitleştirmemize nasıl yardımcı olabileceğine bir göz atalım.

Immer ile Redüktör Yazma

Aşağıda tanımlanan durum nesnesine sahip olduğumuzu varsayalım.

 const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

Ve yeni bir nesne eklemek istedik ve sonraki adımda installed anahtarını true olarak ayarladık.

 const newPackage = { name: 'immer', installed: false };

Bunu JavaScripts nesnesi ve dizi yayma sözdizimi ile olağan şekilde yapacak olsaydık, durum düşürücümüz aşağıdaki gibi görünebilirdi.

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

Bu nispeten basit durum nesnesi için bunun gereksiz yere ayrıntılı olduğunu ve hatalara eğilimli olduğunu görebiliriz. Biz de devletin gereksiz olan her yerine dokunmak zorundayız. Şimdi bunu Immer ile nasıl basitleştirebileceğimizi görelim.

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 //curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

 import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);