Redux'ta Sıcak Modül Değişimi

Bu, Redux uygulamasındaki sıcak modül değişiminin (veya HMR) minimal bir örneğidir. Çalışan demo kodu GitHub'da barındırılıyor. Yalnızca HMR'yi desteklemek için gerekli olan ayarları dahil ederek, HMR'yi kendi Redux uygulamanızda uygulamanızı kolaylaştırıyoruz.

HMR'yi uygulamak için sabırsızlanıyorsanız, projeniz için HMR'yi beş dakika içinde kurmak için bu bölüme atlayın!

Örneği Çalıştır

Önce ellerini kirlet! Bu örnek uygulamayı başlatmak için komutları çalıştırmadan önce lütfen Git, Node.js ve Yarn'ın makinenize doğru şekilde yüklendiğinden emin olun.

 $ git clone https://github.com/Front-end-io/articles.git $ cd articles && git checkout redux-hmr $ yarn install $ yarn start

Ardından çalışıp çalışmadığını görmek için http://localhost:3000/ adresini ziyaret edin.

Kodunuzu yazdıktan sonra, etkin modül değişimi tam bir yenileme yapmadan sayfayı güncelleyebilir. Daha da önemlisi, diğer kaynaklar yerinde güncellenirken Redux durumu korunur.

Sıcak Modül Değişimi

Sıcak modül değişimi, Webpack tarafından sunulan en kullanışlı özelliklerden biridir. JSON, CSS ve JS dosyaları dahil olmak üzere her türlü modülün tam bir yenilemeye gerek kalmadan çalışma zamanında güncellenmesine izin verir.

İşte dahili olarak nasıl çalıştığı:

1. Uygulama, HMR çalışma zamanından güncellemeleri kontrol etmesini ister.
2. Çalışma zamanı, güncellemeleri eşzamansız olarak indirir ve uygulamaya bildirir.
3. Uygulama daha sonra çalışma zamanından güncellemeleri uygulamasını ister.
4. Çalışma zamanı, güncellemeleri eşzamanlı olarak uygular.

HMR, bir Redux uygulaması geliştirirken üretkenliği artırır. Redux, JavaScript uygulamaları için öngörülebilir bir durum kapsayıcıdır. React'e dayalı çok popüler, son teknoloji bir çerçevedir. Redux, Redux'un ilk ilkesinin tanımı gereği, belgelerinde “Tek bir hakikat kaynağı” olarak tanımlanan tekil bir paylaşılan veri deposudur. Veri deposu ( reducers tarafından güncellenen düz bir JavaScript nesnesi), kullanıcı uygulamada çalışırken güncellenecektir. Bir düğmeye tıklama, arka uç verilerini yükleme vb. gibi her kullanıcı işlemi, mağazayı muhtemelen birden çok kez güncelleyecektir. Hata yalnızca durumun belirli bir anlık görüntüsünde meydana geldiğinde bir hatayı düzeltmek kolay değildir.

HMR, global mağazayı yeniden başlatmadan sayfayı güncellememizi sağlar. Redux geliştirmesi sırasında, bir dizi işlemden sonra mağazayı incelemek isteyebiliriz. Çok yaygın bir senaryo, bir hatanın yalnızca mağazaya belirli (belki karmaşık) bir öğeyi ekledikten sonra ortaya çıkmasıdır. HMR olmadan, aşağıdaki adımları yapmalıyız:

1. Hataya neden olabilecek kodu değiştirin.
2. Sayfayı yenileyin, belirli öğeyi mağazaya ekleyin.
3. Hatalar devam ederse Adım 1'i tekrarlayın.

Hatayı bulmak zorsa, yukarıdaki yineleme tekrar tekrar tekrarlanacaktır. Gerçek dünyada, hata ancak daha fazla işlemden sonra ortaya çıkabilir. HMR, mevcut depolama değerini değiştirmeden korurken değiştirilmiş kodu derlememize ve uygulamamıza yardımcı olur. Adım 2'yi tekrar etmemize gerek yok. Geliştirme verimliliğini artırır.

Bu Örnekteki Özellik

Yalnızca HMR yeteneğini göstermek için özelliği minimum düzeyde tutmak istiyoruz. Dolayısıyla bu uygulamada, bir React uygulamasında redux-logger, tepki-yönlendirici-redux, redux-thunk, redux-devtools vb. gibi ortak özellikleri dahil etmiyoruz. Bu arada, yalnızca bir redüktör, iki eylem ve 1 sayfa.

Uygulamamız mağazada sadece bir sayaç değeri tutar. Sayaç değerini gösteren home adında tek bir sayfamız ve sayaç değerini artırmak/azaltmak için iki düğmemiz var.

HMR'nin çalıştığını doğrulamak için sayacı birkaç kez artırmanız/azaltmanız ve ardından bazı kodları değiştirmeniz yeterlidir. Örneğin, Counter to Counter in store başlığını değiştirin. O zaman şunu bulacağız:

• Sayfa yenilenmiyor.
• Görüntülenen sayaç değeri DEĞİŞTİRİLMEMİŞTİR.
• Başlık mağazada Sayaç olarak değiştirildi.

HMR'yi Beş Dakikada Ayarlayın

HMR'yi kurmak için şu adımları izleyin.

Temel Kitaplıklar

HMR'yi desteklemek için bu kitaplıklar kurulmalıdır:

• tepki-hot-loader@^4.2.0: React uygulamasını gerçek zamanlı olarak derleyin ve güncelleyin.
• webpack-dev-server@^3.1.4: Bir Webpack uygulaması sunar. Değişikliklerde tarayıcıyı günceller.

ES6

ECMAScript6 kullanıyorsanız (bu günlerde kim değil?), ES6'yı gerçek zamanlı olarak derlemek için biraz daha araca ihtiyacınız var. İlk olarak, bu minimal ES6 yapılandırma dosyası .babelrc'dir:

 { "env": { "development": { "presets": [ "react-hmre" ] } } }

Gerçek zamanlı derlemeyi desteklemek için bu kitaplık gereklidir:

• babel-önceden ayarlanmış-tepki-hmre@^1.1.1

Webpack.config.js

HMR'yi Webpack yapılandırma dosyası webpack.config.js'de yapılandırmamız gerekiyor.

İlk olarak, eklentiler bölümünde HMR eklentisini etkinleştirin:

 "plugins": [ … new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ]

HMR eklentisi, güncellenen modülleri listeleyen bir JSON dosyası olan bir Manifest ve uygulanacak verileri içeren bir JSON dosyası olan bir Güncelleme oluşturur. Dikkat edilmesi gereken, HMR, Webpack tarafından sağlanan bir seçenektir. HMR arabirimini uygulayan stil yükleyici gibi yükleyiciler, HMR aracılığıyla bir güncelleme alır ve ardından eski kodu yeni kodla değiştirir.

Webpack-dev-server kullanıyorsak, devServer bölümünde etkin bayrağı açmamız gerekir:

 "devServer": [ ... hot: true, ]

Redux Düşürücüleri Sıcak Yeniden Yükleme

Redux sürüm 2.0.0'dan itibaren, indirgeyiciler örtük olarak çalışırken yeniden yüklenmez, çünkü örtük sıcak yeniden yükleme bazı sorunlara neden olur. Redux durumunuz, sıcak güncellendiğinde ilk değerlere sıfırlanırsa, redüktörler için sıcak güncellemeyi etkinleştirmeyi deneyin:

 import { createStore } from 'redux'; import rootReducer from '../reducers/index'; export default function configureStore(initialState) { const store = createStore(rootReducer, initialState); if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { const nextRootReducer = require('../reducers/index'); store.replaceReducer(nextRootReducer); }); } return store; }

Gelişmiş Ayarlar

HMR'nin daha gelişmiş ayarları için lütfen HMR API'sine bakın.

Koşmak

Son olarak, lütfen uygulamayı şununla çalıştırın:

 $ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server

Sorun giderme

HMR Değişiklikleri Uygulamıyor

HMR herhangi bir uyarı vermeden sessizce başarısız olabilir. Kodu güncelleyip kaydettiğinizde, sayfa hiç güncellenmez. Bunun nedeni muhtemelen sisteminizin bu kadar çok dosya değişikliğini izlemenize izin vermemesidir.

Ubuntu'da sysctl -a | grep inotify sysctl -a | grep inotify inotify, geçerli user.max_inotify_watches değerini görüntülemek için. Çalıştırarak bu sayıyı artırmayı deneyin: sudo sysctl fs.inotify.max_user_watches=524288 . Alternatif olarak, sudo vim /etc/sysctl.conf dosyasına yeni bir fs.inotify.max_user_watches=524288 satırı ekleyin ve ardından değişikliği uygulamak için sudo sysctl -p /etc/sysctl.conf komutunu çalıştırın.