Penggantian Modul Panas di Redux

Ini adalah contoh minimal penggantian modul panas (atau HMR) dalam aplikasi Redux. Kode demo yang berfungsi di-host di GitHub. Kami hanya menyertakan pengaturan yang penting untuk mendukung HMR, membuat Anda mudah menerapkan HMR di aplikasi Redux Anda sendiri.

Jika Anda tidak sabar untuk menerapkan HMR, lompat ke bagian ini untuk menyiapkan HMR untuk proyek Anda dalam waktu lima menit!

Jalankan Contoh

Kotorkan tanganmu dulu! Sebelum Anda menjalankan perintah untuk memulai aplikasi contoh ini, harap pastikan bahwa Git, Node.js, dan Yarn diinstal dengan benar di mesin Anda.

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

Kemudian kunjungi http://localhost:3000/ untuk melihat apakah itu berfungsi.

Setelah menulis kode Anda, penggantian modul panas dapat memperbarui halaman tanpa penyegaran penuh. Lebih penting lagi, status Redux disimpan sementara sumber daya lainnya telah diperbarui.

Penggantian Modul Panas

Penggantian modul panas adalah salah satu fitur paling berguna yang ditawarkan oleh Webpack. Ini memungkinkan semua jenis modul, termasuk file JSON, CSS, dan JS, diperbarui saat runtime tanpa perlu penyegaran penuh.

Berikut adalah cara kerjanya secara internal:

1. Aplikasi meminta runtime HMR untuk memeriksa pembaruan.
2. Waktu proses mengunduh pembaruan secara asinkron dan memberi tahu aplikasi.
3. Aplikasi kemudian meminta runtime untuk menerapkan pembaruan.
4. Runtime secara sinkron menerapkan pembaruan.

HMR meningkatkan produktivitas saat mengembangkan aplikasi Redux. Redux adalah penampung status yang dapat diprediksi untuk aplikasi JavaScript. Ini adalah framework state-of-art yang sangat populer berdasarkan React. Redux, menurut definisi prinsip pertama Redux, adalah penyimpanan data bersama tunggal, yang dijelaskan oleh dokumentasinya sebagai "Sumber kebenaran tunggal." Penyimpanan data (objek JavaScript biasa yang diperbarui oleh reducers ) akan diperbarui saat pengguna mengoperasikan aplikasi. Setiap operasi pengguna, seperti mengklik tombol, memuat data back-end, dll., kemungkinan akan memperbarui toko beberapa kali. Tidak mudah untuk memperbaiki bug ketika bug hanya terjadi dengan snapshot status tertentu.

HMR memungkinkan kami memperbarui halaman tanpa menginisialisasi ulang penyimpanan global. Selama pengembangan Redux, kami mungkin ingin memeriksa toko setelah serangkaian operasi. Skenario yang sangat umum adalah, bug terjadi hanya setelah kami menambahkan item tertentu (mungkin kompleks) ke toko. Tanpa HMR, kita harus melakukan langkah-langkah berikut:

1. Ubah kode yang berpotensi menyebabkan bug.
2. Segarkan halaman, tambahkan item tertentu ke toko.
3. Jika bug tetap ada, ulangi Langkah 1.

Iterasi di atas akan berulang lagi dan lagi jika bug sulit ditemukan. Di dunia nyata, bug hanya dapat muncul setelah lebih banyak operasi. HMR membantu kita untuk mengkompilasi dan menerapkan kode yang dimodifikasi sambil menjaga nilai penyimpanan saat ini tidak berubah. Kita tidak perlu mengulangi Langkah 2. Ini meningkatkan efisiensi pengembangan.

Fitur dalam Contoh Ini

Kami ingin menjaga fitur minimal, hanya untuk menunjukkan kemampuan HMR. Jadi dalam aplikasi ini, kami tidak memasukkan fitur umum dalam aplikasi React, termasuk redux-logger, react-router-redux, redux-thunk, redux-devtools, dll. Sementara itu, kami hanya menyimpan satu peredam, dua tindakan, dan 1 halaman.

Aplikasi kami hanya menyimpan nilai penghitung di toko. Kami hanya memiliki satu halaman yang disebut home , yang menampilkan nilai penghitung dan dua tombol untuk menambah/mengurangi nilai penghitung.

Untuk mengonfirmasi bahwa HMR berfungsi, cukup tambah/kurangi penghitung beberapa kali, lalu ubah beberapa kode. Misalnya, ubah judul Counter to Counter in store . Kemudian kita akan menemukan bahwa:

• Halaman tidak di-refresh.
• Nilai penghitung yang ditampilkan TIDAK BERUBAH.
• Judul telah diubah menjadi Counter in store .

Siapkan HMR dalam Lima Menit

Untuk menyiapkan HMR, ikuti langkah-langkah berikut.

Perpustakaan Esensial

Pustaka ini harus diinstal untuk mendukung HMR:

• react-hot-loader@^4.2.0: Kompilasi dan perbarui aplikasi React secara real time.
• webpack-dev-server@^3.1.4: Melayani aplikasi Webpack. Memperbarui browser pada perubahan.

ES6

Jika Anda menggunakan ECMAScript6 (Siapa yang tidak, akhir-akhir ini?), Anda memerlukan beberapa alat lagi untuk mengkompilasi ES6 secara real time. Pertama, ini adalah file konfigurasi ES6 minimal .babelrc:

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

Untuk mendukung kompilasi real-time, perpustakaan ini diperlukan:

• babel-preset-react-hmre@^1.1.1

Webpack.config.js

Kita perlu mengkonfigurasi HMR di file konfigurasi Webpack webpack.config.js.

Pertama, aktifkan plugin HMR di bagian plugin:

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

Plugin HMR menghasilkan Manifest, file JSON yang mencantumkan modul yang diperbarui, dan Update, file JSON yang berisi data yang akan diterapkan. Yang perlu diperhatikan adalah, HMR adalah opsi yang disediakan oleh Webpack. Pemuat seperti pemuat gaya, yang mengimplementasikan antarmuka HMR, menerima pembaruan melalui HMR dan kemudian mengganti kode lama dengan kode baru.

Jika kita menggunakan webpack-dev-server, maka kita perlu mengaktifkan hot flag di bagian devServer:

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

Muat Ulang Panas Pengurang Redux

Mulai dari Redux versi 2.0.0, reduksi tidak hot reload secara implisit karena hot reload implisit menyebabkan beberapa masalah. Jika status Redux Anda diatur ulang ke nilai awal saat hot diperbarui, coba aktifkan hot update untuk reduksi:

 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; }

Pengaturan lanjutan

Untuk pengaturan HMR lebih lanjut, silakan merujuk ke HMR API.

Lari

Terakhir silahkan jalankan aplikasinya dengan :

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

Penyelesaian masalah

HMR Tidak Menerapkan Perubahan

HMR mungkin gagal secara diam-diam tanpa peringatan apa pun. Saat Anda memperbarui kode dan menyimpan, halaman tidak diperbarui sama sekali. Ini mungkin karena sistem Anda tidak mengizinkan Anda untuk melihat begitu banyak perubahan file.

Di Ubuntu, Anda dapat menjalankan sysctl -a | grep inotify sysctl -a | grep inotify untuk melihat nilai user.max_inotify_watches saat ini. Coba tambah angka ini dengan menjalankan: sudo sysctl fs.inotify.max_user_watches=524288 . Atau, tambahkan baris baru fs.inotify.max_user_watches=524288 ke file sudo vim /etc/sysctl.conf dan kemudian jalankan sudo sysctl -p /etc/sysctl.conf untuk menerapkan perubahan.