Tehnologija
Zamjena vrućeg modula u Reduxu
Ovo je minimalan primjer zamjena vrućeg modula (ili HMR) u a Redux primjena. Radni demo kod smješten je na GitHub . Uključujemo samo one postavke neophodne za podršku HMR-u, što vam olakšava primjenu HMR-a u vlastitoj aplikaciji Redux.
Ako jedva čekate da primijenite HMR, prijeđite na ovaj odjeljak postaviti HMR za svoj projekt u roku od pet minuta!
kako dizajnirati odredišnu stranicu
Pokrenite Primjer
Prvo zaprljajte ruke! Prije pokretanja naredbi za pokretanje ovog primjera aplikacije, osigurajte to Ići , Node.js , i Pređa su ispravno instalirani na vašem računalu.
$ git clone https://github.com/Front-end-io/articles.git $ cd articles && git checkout redux-hmr $ yarn install $ yarn start Zatim posjetite http: // localhost: 3000 / da vidim radi li.
Nakon pisanja koda, vruća zamjena modula može ažurirati stranicu bez potpunog osvježavanja. Još važnije, Redux država čuva se dok su ostali resursi ažurirani na mjestu.
Zamjena vrućeg modula
Vruća zamjena modula je jedna od najkorisnijih značajki koju nudi Webpack . Omogućuje ažuriranje svih vrsta modula, uključujući JSON, CSS i JS datoteke, tijekom izvođenja bez potrebe za potpunim osvježavanjem.
Evo kako to interno funkcionira:
- Aplikacija traži od HMR-a da izvrši provjeru ažuriranja.
- Runtime asinhrono preuzima ažuriranja i obavještava aplikaciju.
- Zatim aplikacija traži od izvođenja da primijeni ažuriranja.
- Izvršavanje sinkronizirano primjenjuje ažuriranja.
HMR povećava produktivnost pri razvoju Redux aplikacije. Redux je predvidljivi spremnik stanja za JavaScript aplikacije. To je vrlo popularan vrhunski okvir zasnovan na Reactu. Redux, prema definiciji prvog principa Redux-a, jedinstvena je zajednička pohrana podataka, koja je u svojoj dokumentaciji opisana kao „Jedan izvor istine“. The pohrana podataka (obični JavaScript objekt koji je ažurirao reducers) ažurirat će se dok korisnik radi na aplikaciji. Svaka korisnička operacija, poput klika na gumb, učitavanja pozadinskih podataka itd., Vjerojatno će ažurirati trgovinu više puta. Nije lako popraviti programsku pogrešku kad se dogodi samo s određenim snimkom stanja.
HMR nam omogućuje ažuriranje stranice bez ponovne inicijalizacije globalne trgovine. Tijekom razvoja Reduxa, možda ćemo htjeti pregledati trgovinu nakon niza operacija. Vrlo čest scenarij je da se bug javlja tek nakon što smo dodali određenu (možda složenu) stavku u trgovinu. Bez HMR-a moramo napraviti sljedeće korake:
agilan pristup dokumentaciji je
- Izmijenite kôd koji potencijalno uzrokuje bug.
- Osvježite stranicu, dodajte određenu stavku u trgovinu.
- Ako se bugovi i dalje javljaju, ponovite 1. korak.
Gornja se ponavljanja ponavljati iznova i iznova ako je programsku pogrešku teško pronaći. U stvarnom svijetu greška se može pojaviti tek nakon još više operacija. HMR nam pomaže u kompajliranju i primjeni modificiranog koda, a da trenutna vrijednost pohrane ostane nepromijenjena. Ne trebamo ponavljati 2. korak. To povećava učinkovitost razvoja.
Značajka u ovom primjeru
Značajku želimo zadržati minimalnom, samo da bismo demonstrirali HMR sposobnost. Dakle, u ovoj aplikaciji ne uključujemo zajedničke značajke u React aplikaciju, uključujući redux-logger , reagirati-usmjerivač-redux , redux-thunk , redux-devtools itd. U međuvremenu zadržavamo samo jedan reduktor , dva radnje i 1 stranicu.
Naša aplikacija u trgovini zadržava samo protuvrijednost. Imamo samo jednu nazvanu stranicu Dom , koji prikazuje vrijednost brojača i dva gumba za povećanje / smanjenje vrijednosti brojača.
Da biste potvrdili da HMR radi, jednostavno povećajte / smanjite brojač više puta, a zatim izmijenite neki kod na src / js / components / home.js . Na primjer, izmijenite naslov Brojač do Brojač u trgovini . Tada ćemo otkriti:
- Stranica nije osvježena.
- Prikazana vrijednost brojača NIJE PROMIJENJENA.
- Naslov je promijenjen u Brojač u trgovini .
Postavite HMR u pet minuta
Da biste postavili HMR, slijedite ove korake.
Osnovne knjižnice
Ove biblioteke moraju biti instalirane da podržavaju HMR:
- [e-pošta zaštićena]^ 4.2.0 : Sastavite i ažurirajte React aplikaciju u stvarnom vremenu.
- [e-pošta zaštićena]^ 3.1.4 : Poslužuje aplikaciju Webpack. Ažurira preglednik o promjenama.
ES6
Ako upotrebljavate ECMAScript6 (Tko danas nije?), Trebaju vam još neki alati za sastavljanje ES6 u stvarnom vremenu. Prvo, ovo je minimalna ES6 konfiguracijska datoteka .babelrc :
{ 'env': { 'development': { 'presets': [ 'react-hmre' ] } } } Za podršku kompilacije u stvarnom vremenu potrebna je ova knjižnica:
Webpack.config.js
Moramo konfigurirati HMR u konfiguracijskoj datoteci Webpack webpack.config.js .
Prvo, omogućite HMR dodatak u odjeljku dodataka:
'plugins': [ … new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ] HMR dodatak generira manifest, JSON datoteku s popisom ažuriranih modula i Update, JSON datoteku koja sadrži podatke koji se primjenjuju. Treba napomenuti da je HMR opcija koju pruža Webpack. Utovarivači poput style-loader , koji implementiraju HMR sučelje, primaju ažuriranje putem HMR-a, a zatim zamjenjuju stari kod novim.
Ako koristimo webpack-dev-poslužitelj , tada moramo uključiti vruću zastavicu u odjeljku devServer:
'devServer': [ ... hot: true, ] Vruće ponovno napunite Redux reduktore
Polazeći od Redux verzije 2.0.0, reduktori se ne implicitno ponovno učitavaju jer implicitno vruće ponovno učitavanje uzrokuje neke probleme. Ako se vaše stanje Redux resetira na početne vrijednosti kada se ažurira vruće, pokušajte omogućiti vruće ažuriranje za reduktore:
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; } Napredne postavke
Za naprednije postavke HMR-a, pogledajte HMR API .
Trčanje
Na kraju, pokrenite aplikaciju sa:
$ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server Rješavanje problema
HMR jednostavno ne primjenjuje promjene
HMR može tiho zakazati bez ikakvih upozorenja. Kada ažurirate kod i spremite, stranica se jednostavno uopće ne ažurira. To je vjerojatno zato što vam vaš sustav ne dopušta gledanje toliko promjena datoteka.
Na Ubuntuu možete pokrenuti sysctl -a | grep inotify za prikaz trenutne user.max_inotify_watches vrijednost. Pokušajte povećati ovaj broj pokretanjem: sudo sysctl fs.inotify.max_user_watches=524288. Alternativno dodajte novi redak fs.inotify.max_user_watches=524288 podnijeti sudo vim /etc/sysctl.conf a zatim pokrenite sudo sysctl -p /etc/sysctl.conf primijeniti promjenu.
čvor js sinkronizira async poziv
Razumijevanje osnova
Što je okvir Redux?
Redux je JavaScript knjižnica koja se koristi za upravljanje stanjima aplikacija primjenom predvidivih spremnika stanja. Koristi se za izgradnju korisničkih sučelja na stabilan i dosljedan način.
Što je vruće punjenje?
Vruće učitavanje ili vruća zamjena akcija je ažuriranja koda aplikacije dok je aplikacija pokrenuta bez ponovne inicijalizacije aplikacije.
