Înlocuire la cald de modul în Redux

Acesta este un exemplu minim de înlocuire a modulului la cald (sau HMR) într-o aplicație Redux. Codul demonstrativ funcțional este găzduit pe GitHub. Includem doar acele setări esențiale pentru a accepta HMR, făcându-vă ușor să aplicați HMR în propria dvs. aplicație Redux.

Dacă abia așteptați să aplicați HMR, treceți la această secțiune pentru a configura HMR pentru proiectul dvs. în termen de cinci minute!

Rulați Exemplul

Murdareste-te mai intai mainile! Înainte de a rula comenzile pentru a porni acest exemplu de aplicație, asigurați-vă că Git, Node.js și Yarn sunt instalate corect pe computer.

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

Apoi vizitați http://localhost:3000/ pentru a vedea dacă funcționează.

La scrierea codului, înlocuirea la cald a modulului poate actualiza pagina fără o reîmprospătare completă. Mai important, starea Redux este păstrată în timp ce alte resurse au fost actualizate.

Înlocuire modul cald

Înlocuirea la cald a modulelor este una dintre cele mai utile caracteristici oferite de Webpack. Permite ca toate tipurile de module, inclusiv fișierele JSON, CSS și JS, să fie actualizate în timpul execuției fără a fi nevoie de o reîmprospătare completă.

Iată cum funcționează intern:

1. Aplicația solicită runtime HMR să verifice actualizările.
2. Runtime descarcă asincron actualizările și notifică aplicația.
3. Aplicația solicită apoi runtime-ului să aplice actualizările.
4. Runtime aplică actualizările în mod sincron.

HMR crește productivitatea atunci când se dezvoltă o aplicație Redux. Redux este un container de stare previzibil pentru aplicațiile JavaScript. Este un cadru de ultimă oră foarte popular, bazat pe React. Redux, prin definiția primului principiu al Redux, este un singur depozit de date partajat, descris de documentația sa ca o „sursă unică a adevărului”. Magazinul de date (un obiect JavaScript simplu actualizat de reducers ) va fi actualizat pe măsură ce utilizatorul operează pe aplicație. Fiecare operațiune a utilizatorului, cum ar fi clic pe un buton, încărcare date back-end etc., va actualiza probabil magazinul de mai multe ori. Nu este ușor să remediați o eroare atunci când eroarea se întâmplă numai cu un anumit instantaneu al stării.

HMR ne permite să actualizăm pagina fără a reinițializa magazinul global. În timpul dezvoltării Redux, este posibil să dorim să inspectăm magazinul după o serie de operațiuni. Un scenariu foarte comun este că o eroare apare numai după ce am adăugat un anumit articol (poate complex) în magazin. Fără HMR, trebuie să facem următorii pași:

1. Modificați codul care poate cauza eroarea.
2. Actualizează pagina, adaugă articolul anume în magazin.
3. Dacă erorile persistă, repetați Pasul 1.

Iterația de mai sus se va repeta din nou și din nou dacă bug-ul este greu de găsit. În lumea reală, bug-ul poate apărea numai după și mai multe operațiuni. HMR ne ajută să compilam și să aplicăm codul modificat, păstrând neschimbată valoarea actuală a magazinului. Nu trebuie să repetăm ​​Pasul 2. Mărește eficiența dezvoltării.

Caracteristică din acest exemplu

Vrem să menținem caracteristica minimă, doar pentru a demonstra capacitatea HMR. Deci, în această aplicație, nu încorporăm caracteristici comune într-o aplicație React, inclusiv redux-logger, react-router-redux, redux-thunk, redux-devtools etc. Între timp, păstrăm doar un reductor, două acțiuni și 1 pagină.

Aplicația noastră păstrează doar o valoare de contor în magazin. Avem o singură pagină numită home , care afișează valoarea contorului și două butoane pentru a crește/scădea valoarea contorului.

Pentru a confirma că HMR funcționează, pur și simplu crește/scădea contorul de mai multe ori, apoi modificați un cod. De exemplu, modificați titlul Counter to Counter în magazin . Atunci vom constata că:

• Pagina nu este reîmprospătată.
• Valoarea contorului afișată NU ESTE MODIFICATA.
• Titlul a fost schimbat în Counter în magazin .

Configurați HMR în cinci minute

Pentru a configura HMR, urmați acești pași.

Biblioteci esențiale

Aceste biblioteci trebuie instalate pentru a suporta HMR:

• react-hot-loader@^4.2.0: Compilați și actualizați aplicația React în timp real.
• webpack-dev-server@^3.1.4: Deservește o aplicație Webpack. Actualizează browserul cu privire la modificări.

ES6

Dacă utilizați ECMAScript6 (Cine nu este, în zilele noastre?), aveți nevoie de mai multe instrumente pentru a compila ES6 în timp real. În primul rând, acesta este fișierul de configurare minim ES6 .babelrc:

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

Pentru a sprijini compilarea în timp real, această bibliotecă este necesară:

• babel-preset-react-hmre@^1.1.1

Webpack.config.js

Trebuie să configuram HMR în fișierul de configurare Webpack webpack.config.js.

În primul rând, activați pluginul HMR în secțiunea de pluginuri:

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

Pluginul HMR generează un Manifest, un fișier JSON care listează modulele actualizate și o Actualizare, un fișier JSON care conține datele de aplicat. Ceea ce trebuie remarcat este că HMR este o opțiune oferită de Webpack. Încărcătoarele precum style-loader, care implementează interfața HMR, primesc o actualizare prin HMR și apoi înlocuiesc vechiul cod cu noul cod.

Dacă folosim webpack-dev-server, atunci trebuie să activăm hot flag în secțiunea devServer:

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

Reîncărcați la cald reductoarele Redux

Începând cu versiunea Redux 2.0.0, reductoarele nu sunt reîncărcate la cald implicit deoarece reîncărcarea la cald implicită provoacă unele probleme. Dacă starea Redux este resetată la valorile inițiale când este actualizată la cald, încercați să activați actualizarea la cald pentru reductoare:

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

Setari avansate

Pentru setări mai avansate ale HMR, consultați API-ul HMR.

Alerga

În cele din urmă, rulați aplicația cu:

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

Depanare

HMR pur și simplu nu aplică modificările

HMR poate eșua în tăcere, fără avertismente. Când actualizați codul și salvați, pagina pur și simplu nu se actualizează deloc. Acest lucru se datorează probabil că sistemul dumneavoastră nu vă permite să urmăriți atât de multe modificări ale fișierelor.

Pe Ubuntu, puteți rula sysctl -a | grep inotify sysctl -a | grep inotify pentru a vizualiza valoarea curentă user.max_inotify_watches . Încercați să creșteți acest număr rulând: sudo sysctl fs.inotify.max_user_watches=524288 . Ca alternativă, adăugați o nouă linie fs.inotify.max_user_watches=524288 la fișierul sudo vim /etc/sysctl.conf și apoi executați sudo sysctl -p /etc/sysctl.conf pentru a aplica modificarea.