Ξεκινήστε με το Redux Thunk

Το κράτος είναι ένα μεγάλο μέρος μιας εφαρμογής που αντιδρά, γι 'αυτό το Redux συνηθίζεται συνήθως με αυτό. Ότι τα δεδομένα προέρχονται συχνά από μια βάση δεδομένων, η οποία απαιτεί ένα αίτημα και μια απάντηση. Για ορισμένες εφαρμογές, αυτή η επικοινωνία μπορεί να είναι σταθερή. Μπορεί να είναι δύσκολο να προσπαθήσουμε να διαχειριστείτε αποκλειστικά μέσα σε αντιδράσεις.

Αυτό εισάγει επίσης μερικά νέα προβλήματα - τι συμβαίνει αν φορτώνεται αργά, ή δεν φορτώνεται καθόλου; Κάθε συστατικό που ασχολείται με ασύγχρονα δεδομένα θα πρέπει να περιέχει λογική για να χειριστεί αυτά τα σενάρια.

Ένας «Thunk» είναι μια έννοια που μπορεί να βοηθήσει με αυτή την κατάσταση. Κάθε thunk είναι μια λειτουργία που επιστρέφει άλλη λειτουργία. Αυτή η λειτουργία μπορεί στη συνέχεια να κληθεί σε ένα μεταγενέστερο σημείο, σαν μια επανάκληση. Αν μπορούσαμε να αποσταλεί ένα thunk αντί για ένα αντικείμενο δράσης, μπορούμε να προσθέσουμε κάποια επιπλέον λογική σε αντίδραση σε άλλο συμβάν.

Το Redux Thunk είναι μια βιβλιοθήκη που κάθεται μεταξύ των αποσταθεροποιημένων ενεργειών και του μειωτήρα. Όταν δει ένα thunk αποστέλλεται, περνά μερικές μεθόδους στην επιστρεφόμενη λειτουργία που μπορεί να χρησιμοποιηθεί για την αποστολή περαιτέρω ενεργειών, όπως ένα συμβάν επιτυχίας ή σφάλματος.

• 20 λαμπρά plugins jquery

Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε τους thunks για να σας βοηθήσουμε να τραβήξετε τα δεδομένα από ένα διακομιστή και όχι από ένα αρχείο json, που συνεργάζεται με Photoshare - Εφαρμογή φωτογραφιών που παρατηρείται με το Redux.

Έχετε ένα νέο έργο ιστότοπου, αλλά το χρειάζεστε για να μείνετε απλοί; Εδώ είναι οι οδηγοί μας στο καλύτερο οικοδόμος ιστότοπου και web hosting υπηρεσία. Κοινή χρήση αρχείων με άλλους; Πάρε το δικό σου αποθήκευση σύννεφων σωστά.

Κατεβάστε τα αρχεία για αυτό το σεμινάριο.

01. Εγκαταστήστε εξαρτήσεις

Υπάρχουν δύο μέρη σε αυτό το έργο - η θέση του μπροστινού άκρου και ο πίσω τελικός διακομιστής που τρέχει. Ενώ το σεμινάριο επικεντρώνεται στο μπροστινό μέρος, χρειαζόμαστε ένα διακομιστή που λειτουργεί για να φέρω τις φωτογραφίες. Κατεβάστε τα αρχεία του έργου και εγκαταστήστε τις εξαρτήσεις τόσο για τον ιστότοπο όσο και για το διακομιστή. Εκτελέστε τους διακομιστές και για τους δύο και να τους αφήσετε να τρέχουν στο παρασκήνιο.

 / * Ένα τερματικό εσωτερικό / site * /
& gt; νήμα
& gt; Ξεκινήστε το νήμα
/ * Ένα τερματικό εσωτερικό / διακομιστή * /
& gt; νήμα
& gt; Έναρξη νήματος 

02. Ρυθμίστε το middleware

Το Redux Thunk είναι α μεσαίο λογισμικό - λειτουργικότητα που κάθεται μεταξύ δράσεων και μειωτήρων που μπορούν να αλλάξουν τον τρόπο με τον οποίο συμπεριφέρονται αυτές οι ενέργειες. Το Redux υποστηρίζει πολλαπλά σύνολα middleware που καλύπτουν ολόκληρη την εφαρμογή. Προστίθενται όταν το κατάστημα δημιουργείται χρησιμοποιώντας το συνθέτω μέθοδος. Προσθέστε middleware στο δημιουργία Μέθοδος εντός του Index.js.

 Εισαγωγή {applymiddleware, συνθέτουν}
από το "Redux".
Εισαγάγετε τον Thunk από το "Redux-Thunk".
[...]
const store = photostore (
rootreducer,
συνθέτω(
applymiddleware (thunk),
αποζημιώ
)
) · 

03. Ρύθμιση δημιουργών δράσης

Το πρώτο πράγμα που πρέπει να κάνουμε τώρα είναι να φορτώσουμε τις φωτογραφίες στη γκαλερί. Όπως και τακτικές ενέργειες, χρειαζόμαστε δημιουργούς δράσης για τα διάφορα κράτη που θα πάρει μια ασύγχρονη κλήση. Οι περισσότεροι θα έχουν αρχή , επιτυχία και λάθος Ενέργειες. Αυτά αφήνουν το Redux να ξέρει τι είναι απασχολημένος η JavaScript. Στα πλαίσια Ενέργειες / φωτογραφίες / φωτογραφίες.js , Ρυθμίστε τρεις δημιουργούς δράσης για αυτές τις διαφορετικές πολιτείες.

 εξαγωγή const loadgallerystart = () = & gt; ({
Τύπος: Load_gallery_start});
εξαγωγή const loadgallerysuccess =
Φωτογραφίες = & gt; ({
Τύπος: Load_gallery_success,
Φωτογραφίες
});
εξαγωγή const loadgalleryerror = () = & gt; ({
Τύπος: Load_gallery_error}); 

04. Δημιουργήστε ένα thunk για φόρτωση

Οι thunks δουλεύουν ακριβώς όπως οι δημιουργοί δράσης. Ακόμα αποστέλλουμε την τιμή επιστροφής, αλλά αυτή τη φορά επιστρέφει μια λειτουργία αντί για ένα αντικείμενο. Το μεσαίο λογισμικό που δημιουργήσαμε προηγουμένως θα περάσει μια μέθοδο αποστολής στην επιστρεφόμενη λειτουργία. Αυτό μας επιτρέπει να στείλουμε περισσότερες ενέργειες στο Redux μετά την αρχική αποστολή. Δημιουργώ ένα φορτώνω τη μέθοδο που επιστρέφει μια λειτουργία. Προς το παρόν, αποστέλλουν μια ενέργεια για να δείξει ότι η γκαλερί εξακολουθεί να φορτώνονται.

 Εξαγωγή CONST LOADGALLY = () = & GT;
Αποστολή = & GT; {
Αποστολή (LoadGalleryStart ());
} · 

05. Τοποθετήστε τα δεδομένα από το διακομιστή

Τώρα είμαστε έτοιμοι να ξεκινήσουμε τη λήψη από το διακομιστή που δημιουργήσαμε στην αρχή. Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας άξονας - ένα πακέτο που έχει σχεδιαστεί για να λειτουργεί με τις υποσχέσεις σε διαφορετικά προγράμματα περιήγησης. Εισαγωγή άξονας και να κάνετε ένα αίτημα για τις φωτογραφίες μέσα φορτώνω . Εάν η υπόσχεση επιλύσει, αποστείλετε τη δράση επιτυχίας και αν δεν αποστείλετε τη δράση σφάλματος. Με αυτό, η δομή του thunk είναι πλήρης.

 Εισαγωγή Αξιού από τον "Αξιό".
[...]
Επιστρέψτε τον Αξιό
.get ("http: // localhost: 3001 / Φωτογραφίες")
.Then (απάντηση = & gt; dispatch (
LoadGallerysuccess (απάντηση.Data)))
.Catch (() = & GT; Dispatch (
LoadGalleryError ())); 

06. Αποστολή του Thunk

Ο Thunk δεν θα κάνει τίποτα μέχρι να αποσταλεί. Μπορούμε να το κάνουμε αυτό μέσα σε ένα αντιδραστικό συστατικό όπως κάθε άλλη ενέργεια. Μια καλή στιγμή για να ξεκινήσετε τη φόρτωση των φωτογραφιών είναι όταν ο χρήστης προβάλλει την κύρια γκαλερί. Μπορούμε να χρησιμοποιήσουμε αντιδράσει συνιστώσα Μέθοδος κύκλου ζωής ως σκανδάλη, αφού ο έλεγχος της γκαλερί δεν έχει ήδη τοποθετηθεί. Στα πλαίσια Εξαρτήματα / Δοχείο / Gallery / Gallery.js αποστολή α φορτώνω δράση προσθέτοντας το mapdispatchtoproprops και το καλεί μέσα συνιστώσα .

 componentdidmount () {
Εάν (! this.props.photoslowed) {
αυτό.Props.loadGallery ();
}
}
εξαγωγή const mapdispatchtooprops =
 Αποστολή = & GT; ({
LoadGallery: () = & GT;
Αποστολή (LoadGallery ()),
}) · 

07. Προσθέστε φωτογραφίες σχετικά με την επιτυχία

Όταν οι φωτογραφίες επιστρέψουν από το διακομιστή, αποστέλλουμε ένα Load_gallery_success δράση με τις φωτογραφίες. Πρέπει να το πάρουμε αυτό στο κράτος μέσω του Φωτογραφίες περιστέλλων. Κατευθύνομαι προς μειωτήρες / φωτογραφίες / φωτογραφίες.js και προσθέστε μια περίπτωση για τη δράση επιτυχίας. Το ωφέλιμο φορτίο περιέχει όλες τις φωτογραφίες ως πίνακα. Μόλις ενημερωθεί η κατάσταση, ο επιλογέας φωτογραφιών περνάει τις φωτογραφίες μέχρι το στοιχείο για να εμφανιστεί το στοιχείο της γκαλερί.

 Θήκη load_gallery_success:
Επιστρέψτε την ενέργεια.Φωτογραφίες; 

08. Ρυθμίστε το UI

Επί του παρόντος, οι φωτογραφίες εμφανίζονται ξαφνικά αφού φορτωθούν. Σε μια βραδύτερη σύνδεση, ο χρήστης θα εξετάσει μια κενή οθόνη μέχρι να τελειώσει η αίτηση, αν το κάνει ποτέ. Οι ενέργειες που στέλνουμε για να φορτώσουν φωτογραφίες μπορούν επίσης να ληφθούν στο μειωτήρα UI για να διατηρήσετε τη διεπαφή μέχρι σήμερα με το τι συμβαίνει. Ενημερώστε τις σημαίες φόρτωσης και σφάλματος εντός του μειωτήρα UI στο μειωτήρες / ui / ui.js .

 Θήκη load_gallery_error:
Επιστρέψτε {... κράτος,
Φόρτωση: FALSE, Σφάλμα: TRUE};
Υπόθεση Load_Gallery_Start:
Επιστρέψτε {... κράτος,
Φόρτωση: TRUE, Σφάλμα: FALSE};
Case Load_Gallery_Success:
Επιστρέψτε {... κράτος,
Φόρτωση: FALSE}; 

09. Προσθέστε τον επιλογέα φόρτωσης και σφαλμάτων

Όπως και με τις ίδιες τις φωτογραφίες της γκαλερί, χρειαζόμαστε τους επιλογείς για να πάρετε τις διάφορες αξίες των κρατών UI από το Redux. Μπορούμε να περάσουμε αυτές στη γκαλερί, η οποία στη συνέχεια θα καταστήσει διαφορετικά στοιχεία αν κάποιος είναι αλήθεια. Σε επιλογείς / ui / ui.js , προσθέστε μερικές λειτουργίες για να πάρετε τις τιμές έξω.

 Εξαγωγή const isgalleryeRored =
 Κράτος = & GT; κράτος.UI.ERROR;
εξαγωγή const isgalleryloading =
 Κράτος = & GT; state.ui.loading; 

10. Προσθέστε δεδομένα στο Gollechcontainer

Με τους επιλογείς έτοιμα, μπορούν τώρα να προστεθούν στο Εκθεσιακός χώρος Στοιχείο εμπορευματοκιβωτίων. Η προσθήκη τους εδώ σημαίνει ότι το στοιχείο που είναι υπεύθυνο για την εμφάνιση της γκαλερί δεν χρειάζεται να γνωρίζει πώς έφτασαν τα δεδομένα. Κατευθύνομαι προς Δοχείο / Gallery / Gallery.js και προσθέστε τους επιλογείς στο mapstatetopropprops . Κάντε σταθερές για τις τιμές που βοηθούν στην εμφάνιση της κατάστασης στο επόμενο βήμα.

 const {error, loading,
 Φωτογραφίες} = αυτό.proprops;
[...]
εξαγωγή const mapstatetoprops =
 Κράτος = & GT; ({
Σφάλμα: IsgalleryErorrored (κατάσταση),
Φόρτωση: isgalleryloading (κατάσταση),
 }) · 

11. Εμφάνιση της κατάστασης φόρτωσης και σφάλματος

Ενώ έχουμε το σφάλμα και τη φόρτωση στηρίγματα, δεν υπάρχει σήμερα ui να υποδείξει πότε είναι ενεργά. Αυτές οι στηρίγματα είναι τιμές boolean, πράγμα που σημαίνει ότι μπορούμε να αλλάξουμε την εμφάνιση των εξαρτημάτων όταν είναι αληθινές. Ενημερώστε τη μέθοδο δημιουργίας για να βεβαιωθείτε ότι το & lt; error & gt; και & lt; loading & gt; Τα εξαρτήματα εμφανίζονται αντί της γκαλερί όταν χρειάζεται.

 εάν (σφάλμα) {
Επιστροφή & LT; Σφάλμα / & GT ;;
}
Αν (φόρτωση) {
Επιστροφή & LT; Φόρτωση / & GT ;;
} 

12. Φέρτε ξανά τη γκαλερί

Με τη φόρτωση της γκαλερί, μπορούμε να προχωρήσουμε σε μια μεμονωμένη φωτογραφία. Κάνοντας κλικ σε οποιαδήποτε από τις φωτογραφίες και η ανανέωση της σελίδας δεν φορτώνει τη φωτογραφία πίσω, καθώς δεν υπάρχει οδηγίες σε αυτή τη σελίδα ακόμα για να φορτώσετε τη συλλογή. Ανοιξε Δοχείο / φωτογραφία / photo.js και φορτώστε τη γκαλερί στο συνιστώσα όπως στο Εκθεσιακός χώρος συστατικό. ο photosloaded Ο έλεγχος δεν θα προσπαθήσει να φορτώσει ξανά τις φωτογραφίες αν ήταν ήδη φορτωμένες στο πλαίσιο της γκαλερί.

 εάν (! This.props.photosloweded) {
αυτό.Props.loadGallery ();
} 

13. Προσθέστε ένα νέο σχόλιο

Ο χρήστης μπορεί να κάνει κλικ στη φωτογραφία όπου θέλουν να αφήσουν ένα σχόλιο. Η συνιστώσα παρουσίασης φωτογραφιών θα εκτελέσει το addenwomment όταν συμβαίνει αυτό. μεσα στην addenwomment Λειτουργία, υπολογίστε το σημείο όπου ο χρήστης έχει κάνει κλικ μέσα στη φωτογραφία. Ο διακομιστής απαιτεί μια στρογγυλή ποσοστιαία τιμή ακέραιο όταν αποθηκεύεται.

 const φωτογραφία = e.target
 .GetBoundingClientrect ();
const top = e.Clientx - Photo.Left;
const αριστερά = e.Clienty - parte.top;
const toppc = math.round ((κορυφή /
 Photo.width) * 100);
const leftpc = math.round ((αριστερά /
 photo.height) * 100); 

14. Πείτε το Redux για το σχόλιο

Με τη θέση που υπολογίζεται, τότε πρέπει να πούμε το Redux για το σχόλιο, ώστε να μπορεί να εμφανίσει τη φόρμα σχόλια. Υπάρχει ήδη μια ενέργεια που έχει ρυθμιστεί για να προσθέσετε το νέο σχόλιο στην οθόνη. Προσθήκη addenwomment σε mapdispatchtoproprops και καλέστε το αφού υπολογίσαμε τη θέση του κλικ.

 This.props.addnewcomment (
 Toppc, αριστερά).
[...]
εξαγωγή const mapdispatchtooprops =
 Αποστολή = & GT; ({
Προσθήκη: (πάνω, αριστερά) = & GT;
Αποστολή (addnewcomment (κορυφή, αριστερά),
});

15. Πείτε τη φωτογραφία για το νέο σχόλιο

Όταν οι νέες πληροφορίες σχολίων μεταβιβάζονται στο Redux, πρέπει να το μεταβιβάσουμε στο στοιχείο παρουσίασης φωτογραφιών. Αυτό επιτρέπει την εμφάνιση της φόρμας σε αυτή τη θέση. Βρες το getnewcomment επιλογέα, προσθέστε το σε mapstatetopropprops και να περάσει το πλάι & lt; photo & gt; .

 Εξαγωγή Const MapStatetoProps =
 (κατάσταση, στηρίγματα) = & gt; ({
ΠΡΟΣΦΟΡΑ: GETNEWBATION (Κράτος),
});
& lt; φωτογραφία [...] νεοσύστατη = {
 this.props.newcomment} / & gt; 

16. Καλέστε τον Thunk στο σχόλιο

Κάνοντας κλικ στη φωτογραφία τώρα θα εμφανιστεί το νέο σχόλιο. Αυτό είναι το δικό του συνδεδεμένο στοιχείο. Όταν υποβληθεί η φόρμα, καλεί Υποβάλετε σχόλιο τη λειτουργία και να περάσει. Αυτό είναι ένας thunk που θα κάνουμε. Ανοίγω Δοχείο / Νεόδμητη / νεοφερία.js και προσθέστε το thunk στο mapdispatchtoproprops . Να περάσει αυτό το στηρίγμα στο στοιχείο που αποδίδεται.

 & lt · νεοσύστατη [...]
 Υποβάθμιση = {υποβάθμιση} / & gt;
εξαγωγή const mapdispatchtooprops =
 Αποστολή = & GT; ({
Υποβολή δεξιοτήτων: Σχόλιο = & GT; επιστολή(
Υποβάθμιση (σχόλιο))
});

17. Συγκεντρώστε το περιεχόμενο για thunk

Ο Thunk να προσθέσει ένα νέο σχόλιο έχει μια παρόμοια δομή για τη λήψη της γκαλερί, συμπεριλαμβανομένης μιας εκκίνησης, της επιτυχίας και της δράσης σφάλματος. Υπάρχει ένα επιπλέον όρισμα που περνάει σε αυτό το thunk - το γέρτα λειτουργία. Αυτό επιτρέπει την άμεση πρόσβαση στην τρέχουσα κατάσταση προκειμένου να αρπάξει τα δεδομένα από αυτήν. Δημιουργήστε το Υποβάλετε σχόλιο τσακίζω ΔΡΑΣΕΙΣ / ΠΡΟΣΦΥΓΗ / ΝΕΟΔΟΣΗ.JS . Κάθε σχόλιο σχετίζεται με μια φωτογραφία και έναν χρήστη. Για αυτό το σεμινάριο, το αναγνωριστικό χρήστη έχει κωδικοποιηθεί σκληρά στο χρήστης περιστέλλων.

 Εξαγωγή Const ConstComment = Σχόλιο
 = & gt; (αποστολή, getstate) = & gt; {
Αποστολή (υποτίμησηSTARTSTART ());
conct ρεύμαphotoτο =
getcurrentphotoidic (getstate ());
const user =
getcurrentuser (getstate ());
const {αριστερά, κορυφή} =
getnewcomment (getstate ());
} · 

18. Δημοσιεύστε το αίτημα

Με όλα τα απαραίτητα δεδομένα στη θέση τους, μπορούμε να υποβάλουμε το σχόλιο. Ο Αξιός έχει ένα Θέση Μέθοδος αντιμετώπισης ΘΕΣΗ αιτήματα, με το δεύτερο επιχείρημα να είναι τα δεδομένα που αποστέλλουν στο αίτημα αυτό. Προσθέστε το αίτημα στο Thunk, περνώντας δεδομένα σε περίπτωση φιδιού για να ταιριάζει με το τι περιμένει ο διακομιστής.

 Επιστρέψτε τον Αξιό
.Θέση(
"http: // localhost: 3001 / σχόλια", {
User_ID: User.ID,
Photo_ID: Presentaphotophotos,
σχόλιο,
αριστερά,
μπλουζα
}) 

19. Χειριστείτε την επιτυχία και το σφάλμα

Εάν η υπόσχεση από τον Αξιό επιλύσει ή απορρίπτει, πρέπει να πούμε την εφαρμογή σχετικά με αυτό. Εάν επιλύσει με επιτυχία, ο διακομιστής θα περάσει πίσω το περιεχόμενο του σχολίου. Πρέπει να περάσουμε αυτό με την επιτυχία της επιτυχίας. Εάν απορριφθεί, πυρκαγιά μια ενέργεια σφάλματος. Ενημερώστε την υπόσχεση με έπειτα και σύλληψη μπλοκ.

 .Then (({Δεδομένα: {
 ID, σχόλιο, αριστερά, Top}}) = & GT;
επιστολή(
Υποχρεωτική επικοινωνία (
id, σχόλιο, αριστερά, κορυφή,
Χρήστης, τρέχουσαΦωτογραφικός)
)
)
.Catch (() = & GT; Dispatch (
 ΥποβάλετεCommenceError ())) · 

20. Προσθέστε σχόλιο στη φωτογραφία

Αυτή τη στιγμή, μόλις το σχόλιο προστεθεί με επιτυχία, παίρνει εκκαθαριστεί από την οθόνη, αλλά δεν είναι ορατό μέχρι να ανανεώνει η σελίδα. Μπορούμε να ενημερώσουμε τις φωτογραφίες μειωτήρα για να παραλάβετε το νέο σχόλιο και να το προσθέσουμε στη σειρά σχολίων, για να εμφανιστεί όπως το υπόλοιπο. Ανοίξτε το μειωτήρα / φωτογραφίες / φωτογραφίες.js και προσθέστε μια περίπτωση για να χειριστείτε τη δράση. Δημιουργήστε ένα αντίγραφο του κράτους για να βεβαιωθείτε ότι δεν μεταλλάξαμε κατά λάθος την υπάρχουσα κατάσταση.

 υπόθεση υποβολή_comment_success:
const {id, σχόλιο, κορυφή, αριστερά,
Χρήστης, φωτογραφική μηχανή} = action.payload;
const newstate = json.parse (
Json.stringify (κατάσταση));
const φωτογραφία = newstate.find (
Photo = & GT; Photo.Id === PhotoID);
photo.coms.pus ({
Αναγνωριστικό, σχόλιο, αριστερά, κορυφή, χρήστης
});
Επιστρέψτε το Newstate; 

21. Απόκρυψη άλλων σχόλια

Τέλος, εάν ένα άλλο σχόλιο είναι ανοιχτό και ο χρήστης θέλει να προσθέσει ένα νέο σχόλιο, το UI παίρνει πάρα πολύ γεμάτο. Πρέπει να αποκρύψουμε το πλαίσιο σχολίων εάν ένα νέο σχόλιο αποτελείται. Μπορούμε να γράψουμε στα υπάρχοντα Add_new_comment δράση για να καθαρίσετε το σχολιάζω αξία. Κατευθύνομαι προς μειωτήρα / ui / ui.js και προσθέστε μια περίπτωση γι 'αυτό.

 περίπτωση add_new_comment:
ΕΠΙΣΤΡΟΦΗ {
...κατάσταση,
Σχόλιο: undefined
} · 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο θέμα 283 του δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 283 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• 5 Awesome JavaScript API
• Αναπτύξτε επαναχρησιμοποιούμενα συστατικά αντιδράσεων
• 9 από τα καλύτερα πλαίσια JavaScript