Πώς να ρυθμίσετε τον έλεγχο ταυτότητας χρήστη χρησιμοποιώντας React, Redux και Redux Saga

ΕΝΗΜΕΡΩΣΗ (12.02.2019): Πρόσφατα ενημέρωσα αυτό το έργο με τους πιο πρόσφατους αντιδραστικούς δρομολογητές, δηλαδή την έκδοση 4.3.1 που είναι το αντιδραστήρα-δρομολογητής-dom. Μεταβείτε στο αποθετήριο για να δείτε τις αλλαγές.

Στο προηγούμενο blog μου έγραψα πώς να γράψω μια επεκτάσιμη αρχιτεκτονική στο Node.js. Δεδομένου ότι χρησιμοποίησα τον ταχυδρόμο για να δοκιμάσω τη λειτουργία αυτής της πλατφόρμας, σκέφτηκα ότι θα ήταν καλή ιδέα να εφαρμοστεί από την πλευρά του πελάτη. Για να γράψω την πλευρά των πελατών της αποφάσισα να χρησιμοποιήσω την τεχνολογική στοίβα παρακάτω:

  • Αντιδρώ
  • Redux
  • Redux-Saga
  • Αντιδράστε το δρομολογητή

Αυτή η ανάρτηση προϋποθέτει ότι γνωρίζετε ήδη τις αντιδράσεις και τις βασικές έννοιες των Redux και Redux-Saga.

Ξεκινώντας

Κλωνοποιήστε το προηγούμενο αποθετήριο ιστολογίου μου. CDστο ριζικό φάκελο και εκτελέστε το npm install. Αυτό θα εγκαταστήσει όλες τις εξαρτήσεις.

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

Στη συνέχεια, βεβαιωθείτε ότι το πακέτο nodemon είναι εγκατεστημένο στον υπολογιστή σας παγκοσμίως . Μεταβείτε στο φάκελο του διακομιστή και εκτελέστεnodemon index.jsγια να εκτελέσετε το διακομιστή backend.

Τώρα που το backend μας λειτουργεί και λειτουργεί, ήρθε η ώρα να μπείτε στην εφαρμογή του πελάτη.

Εάν δεν έχετε εγκαταστήσει ακόμη create-react-appστη συνέχεια προχωρήστε το εγκαταστήστε χρησιμοποιώντας την ακόλουθη εντολή.

npm install create-react-app -g

Αυτή η εντολή θα εγκατασταθεί create-react-appπαγκοσμίως .

Δημιουργήστε το έργο

Τώρα ήρθε η ώρα να δημιουργήσετε ένα έργο. Χρήση:

create-react-app react-login

Αυτό θα δημιουργήσει ένα νέο έργο με το όνομα react-login. Προχωρήστε και πηγαίνετε cdσε αυτόν τον φάκελο. Ανοιξε το δικό σουpackage.jsonαρχείο στον αγαπημένο σας επεξεργαστή και προσθέστε τις ακόλουθες εξαρτήσεις:

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

Τώρα απλώς εκτελέστε:

npm install

που θα εγκαταστήσει όλες τις εξαρτήσεις που αναφέραμε παραπάνω.

Αρχείο ευρετηρίου

Αρχικά, ανοίξτε το index.jsαρχείο και τοποθετήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Σε αυτόν τον κωδικό εισάγουμε reactκαι react-dom. Στη συνέχεια εισάγουμε Routerκαι browserHistoryαπό react-router. Αυτά απαιτούνται για σκοπούς δρομολόγησης, τους οποίους θα χρησιμοποιήσω αργότερα στοroutes/index.jsαρχείο. Στη συνέχεια, εισάγουμε Provider, αυτό χρησιμοποιείται για την παροχή αποθήκευσης σε εξαρτήματα παιδιών.

configureStoreκαι routesείναι κάτι που θα εισαγάγουμε στη συνέχεια και το οποίο θα εφαρμόσω σε ένα δευτερόλεπτο. Απλώς εισαγάγετέ τα ως έχουν και χρησιμοποιήστε τα σε αυτό το αρχείο όπως φαίνεται παραπάνω.

Τώρα το αρχείο ευρετηρίου έχει ρυθμιστεί.

Διαμόρφωση καταστήματος

Δημιουργήστε έναν νέο φάκελο που ονομάζεται storeμεσα στην srcντοσιέ. Μέσα σε αυτόν τον νέο φάκελο, δημιουργήστε ένα αρχείο που ονομάζεται configureStore.js,και επικολλήστε τον ακόλουθο κώδικα σε αυτό το αρχείο.

Πρώτα εισάγουμε createStore, τα οποία θα χρησιμοποιηθούν createStoreκαι applyMiddleware, τα οποία θα χρησιμοποιηθούν εφαρμόζουν μεσαία προϊόντα στο κατάστημά μας - sagas σε αυτήν την περίπτωση, αλλά θα το αναφέρουμε αργότερα σε αυτό το blog - από redux.

Στη συνέχεια εισάγουμε rootReducer- πρόκειται να το δημιουργήσουμε αργότερα. Προς το παρόν, απλώς εισαγάγετέ το και χρησιμοποιήστε το ως έχει. Αυτό ακολουθείται από τη συνάρτηση configureStore, η οποία επιστρέφει ένα αντικείμενο καλώντας τη createStoreσυνάρτηση και περνώντας rootReducerως παράμετρο.

Τέλος, export configureStoreκαθιστά configureStoreδιαθέσιμα στο index.jsαρχείο, κατασκευάστηκε νωρίτερα.

Τώρα αυτό είναι εκτός δρόμου, προχωρήστε και δημιουργήστε το src/reducersφάκελο, δημιουργήστε το αρχείο index.js και επικολλήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

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

Δρομολόγηση αρχείου

Ώρα για το αρχείο διαδρομών. Προχωρήστε και δημιουργήστε τοsrc/routesφάκελο και μέσα σε αυτόν το φάκελο δημιουργήστε ένα index.jsαρχείο. Τώρα ανοίξτε το και επικολλήστε τον παρακάτω κώδικα.

Ο κύριος στόχος αυτού του αρχείου είναι να χειριστεί τη δρομολόγηση στο έργο μας. Οι εισαγωγές του αρχείου React, Routeκαι IndexRoute. Μετά από αυτό, χρειαζόμαστε ένα κοντέινερ, σε αυτήν την περίπτωση εισάγω container/App, το οποίο πρόκειται να γράψουμε σύντομα. Στη συνέχεια είναι RegisterPage, το οποίο είναι ένα συστατικό, και θα το γράψουμε επίσης.

Στον γονέα Route, όταν η αρχική διαδρομή ταιριάζει τότε απλώς αποδίδουμε το Appκοντέινερ μας . Οι IndexRouteχρήστες θα δουν RegisterPageποια θα αποδίδονται μέσα στο Appκοντέινερ.

Δοχείο

Τώρα ήρθε η ώρα για το εμπορευματοκιβώτιο. Προχωρήστε και δημιουργήστε έναν νέο φάκελο που ονομάζεται container. Μέσα σε αυτόν το φάκελο δημιουργήστε ένα νέο αρχείο που ονομάζεται App.jsκαι τοποθετήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Αυτό είναι αρκετά απλό. Ο κύριος σκοπός αυτού του αρχείου είναι να αποδώσει τα υπόλοιπα στοιχεία.{this.props.children}εξυπηρετεί αυτόν τον σκοπό.

Εγγραφή

Τώρα είναι ώρα για registerPage. Δημιουργήστε έναν νέο φάκελοsrc/componentsκαι δημιουργήστε ένα στοιχείο μέσα στο φάκελο στοιχείων που ονομάζεταιregisterPage.js. Επικολλήστε τον παρακάτω κώδικα σε αυτό το στοιχείο.

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

Παραγωγή

Αφού δημιουργήσετε όλους τους παραπάνω φακέλους και αρχεία, εκτελέστε npm startτο έργο σας και ανοίξτε//localhost:3000στο πρόγραμμα περιήγησής σας. Θα πρέπει να μπορείτε να δείτε το παρακάτω αποτέλεσμα.

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

Κάνοντας το να λειτουργεί

Δρομολόγηση

Για δρομολόγηση στην εργασία, δημιουργήστε πρώτα ένα νέο στοιχείο μέσα στο φάκελο των συστατικών. Ονομάστε το loginPage.jsκαι τοποθετήστε τον παρακάτω κωδικό μέσα σε αυτό το στοιχείο.

Αυτό το στοιχείο είναι πολύ απλό. Παρέχει βασικό περιεχόμενο και έναν σύνδεσμο για την καταχώριση του στοιχείου.

Τώρα ανοίξτε το routes.jsαρχείο, το οποίο έχουμε ήδη δημιουργήσει παραπάνω, και κάντε τις ακόλουθες αλλαγές.

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

Τώρα ανανεώστε το πρόγραμμα περιήγησής σας και θα πρέπει να μπορείτε να δείτε loginPageπρώτα. Όταν κάνετε κλικ στο σύνδεσμο "Εγγραφή εδώ", registerPageθα πρέπει να αποδίδεται.

Τώρα έχουμε τις βασικές διαδρομές που λειτουργούν.

Είσοδος και εγγραφή

Εγγραφή

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

Φαίνεται ότι υπάρχει πολύς κώδικας σε αυτό το αρχείο τώρα, αλλά είναι απλός. Πρώτα εισάγουμεconnectγια να συνδεθούμε storeμε τοregisterPageσυστατικό. Στη συνέχεια εισάγουμεregisterUserActionπου θα γράψουμε στη συνέχεια.

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

Στη συνέχεια υπάρχει μια φόρμα εγγραφής. Όταν ο χρήστης κάνει κλικ στο κουμπί εγγραφής ενεργοποιεί τη onHandleRegistrationλειτουργία που λαμβάνει τα δεδομένα που εισάγει ο χρήστης από τη φόρμα καιdispatch registerUserActionμε τα δεδομένα τους ως παραμέτρους. Πρόκειται να γράψουμε ενέργειες στο επόμενο βήμα.

Για να λειτουργήσει ο παραπάνω κώδικας, χρειαζόμαστε mapStateToProps, όπως κάνουμε στο κάτω μέρος του στοιχείου και, στη συνέχεια, τον συνδέουμε με το registerPageστοιχείο στο τέλος.

Ενέργειες

Τώρα ήρθε η ώρα να προσθέσετε ενέργειες. Προχωρήστε και δημιουργήστε τοsrc/actionsντοσιέ. Δημιουργήστε τοindex.jsαρχείο και τοποθετήστε τον παρακάτω κώδικα σε αυτό.

Αυτός ο κωδικός εξάγει ορισμένες σταθερές που θα χρησιμοποιούμε σε όλο το έργο μας.

Τώρα προχωρήστε και δημιουργήστε το authenticationActions.jsαρχείο μέσα στον ίδιο φάκελο και τοποθετήστε τον παρακάτω κώδικα σε αυτόν.

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

Sagas

Τώρα βρισκόμαστε στο στάδιο όπου μπορούμε να παρουσιάσουμε τα σάγκα μας στο έργο μας. Εάν είστε νέοι στο Redux-Saga τότε σας προτείνω να διαβάσετε αυτό το ιστολόγιο πριν προχωρήσετε.

Εάν γνωρίζετε ήδη για τα σάγκα, προχωρήστε και δημιουργήστε ένα src/sagasντοσιέ. Δημιουργήστε τοindex.jsαρχείο και τοποθετήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Στο παραπάνω αρχείο, πρώτα εισάγω forkαπό effectsκαιwatchUserAuthenticationαπό watchers- το οποίο δεν υπάρχει ακόμη, αλλά θα το κάνουμε στη συνέχεια. Τότε απλά εξάγετε μια λειτουργία της γεννήτριας και πιρούνι το watchUserAuthentication.

Τώρα προχωρήστε και δημιουργήστε ένα watcher.jsαρχείο στον ίδιο φάκελο όπως παραπάνω και τοποθετήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Και πάλι, εισάγω takeLatestαποτέλεσμα από redux-saga, μετά registerSagaαπό authenticationSaga.js, το οποίο θα δημιουργήσουμε στη συνέχεια. Στη συνέχεια, εισαγάγετε actions/index.jsως τύπους.

Εξάγω μια λειτουργία γεννήτριας που βασικά παρακολουθεί τη REGISTER_USERδράση και κάνει μια κλήση registerSaga.

Τώρα ας δημιουργήσουμε authenticatioSaga.jssaga στον ίδιο φάκελο όπως παραπάνω και τοποθετήστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Σε αυτό το έπος εισάγω μερικά ακόμη εφέ - putκαι callαπό redux-saga. Στη συνέχεια registerUserServiceεισάγεται από service/authenticationService.js. Εισάγω όλες τις ενέργειες ως τύπους από actions/index.js. Τότε εξάγω τη λειτουργία γεννήτριας registerSaga.

Αυτή η λειτουργία είναι υπεύθυνη για την κλήση registerUserService, η οποία πραγματοποιεί μια κλήση ajax στον διακομιστή μας για την εγγραφή νέου χρήστη - την οποία θα γράψω μετά από αυτό το βήμα. Λαμβάνει απάντηση από registerUserServiceκαι βάζει τη REGISTER_USER_SUCCESSδράση. Εάν υπάρχει κάποιο σφάλμα τότε βάζει τη REGISTER_USER_ERRORδράση.

Εισαγάγετε τα σάγκα

Τώρα που έχουμε τα σάγκα μας, είναι καιρός να τα εισαγάγουμε στο κατάστημά μας. Ανοίξτε store/configureStore.jsκαι ενημερώστε τα περιεχόμενά του με τα παρακάτω περιεχόμενα.

Εδώ είμαι εισαγωγής createSagaMiddleware, rootReducerκαι rootSaga. Στη συνέχεια, μέσα στη configureStoreσυνάρτηση, δημιουργώ ένα νέο sagaMiddlewareκαι το μεταφέρω στη createStoreχρήση της applyMiddlewareσυνάρτησης. Τέλος, τρέχω το rootSaga.

Τώρα ήρθε η ώρα να δημιουργήσετε το src/servicesφάκελο και να δημιουργήσετε μια νέα πρώτη υπηρεσία. Ονόμασέ τοauthenticationService.jsκαι τοποθετήστε τον παρακάτω κωδικό σε αυτήν την υπηρεσία.

Αυτό το αρχείο κάνει ένα βασικό αίτημα ajax χρησιμοποιώντας API ανάκτησης με ορισμένες παραμέτρους και κεφαλίδα. Είναι μια αρκετά αυτονόητη υπηρεσία.

Περιστέλλων

Τώρα που υποβάλλουμε ένα αίτημα στον διακομιστή, είναι καιρός να λάβουμε αυτήν την απάντηση στο στοιχείο μας. Για να το κάνουμε αυτό χρειαζόμαστε μειωτή . Προχωρήστε και δημιουργήστε έναreducers/registerReducer.jsαρχείο και τοποθετήστε τον παρακάτω κώδικα σε αυτό.

Είναι μια απλή λειτουργία μειωτή που παίρνει κατάσταση και επιστρέφει νέα κατάσταση. Ελέγχει για REGISTER_USER_SUCCESSκαι REGISTER_USER_ERRORενεργεί και επιστρέφει τη νέα κατάσταση στο στοιχείο.

Τώρα προχωρήστε και ανοίξτε το src/reducers/index.jsαρχείο και ενημερώστε το με τα ακόλουθα περιεχόμενα.

Σε αυτό rootReducerθα εισαγάγω όλους τους μειωτές και μετά θα τους συνδυάσω πριν από την εξαγωγή. Αυτό ακριβώς κάνω register.

Εκτέλεση του ενημερωμένου κώδικα

Τώρα τελειώσαμε με τη διαδικασία εγγραφής. Ήρθε η ώρα να ανανεώσετε το πρόγραμμα περιήγησής σας, να μεταβείτε στη διαδρομή εγγραφής και να εισαγάγετε ορισμένα δεδομένα. Εάν εισαγάγετε ένα υπάρχον email τότε θα δείτε το παρακάτω αποτέλεσμα.

Εάν εισαγάγετε ένα νέο μήνυμα ηλεκτρονικού ταχυδρομείου, τότε θα πρέπει να ανακατευθυνθείτε στο loginPageοποίο θα εφαρμόσουμε στη συνέχεια.

Σύνδεση

Είναι καιρός να συνδεθούμε με τον χρήστη μετά την εγγραφή του. Προχωρήστε και ανοίξτεcomponents/loginPage.jsαρχείο και ενημερώστε το με τα ακόλουθα περιεχόμενα.

Αυτό το στοιχείο είναι σχεδόν το ίδιο με registerPage. Η μόνη διαφορά είναι ότι αποστέλλειloginUserActionπου θα γράψουμε στη συνέχεια. Μια άλλη διαφορά είναι ότι, εάν η απάντηση από το διακομιστή είναι επιτυχής, θα λάβω ένα JWT token. Αποθηκεύω αυτό το διακριτικό localStorage. Μπορείτε να χρησιμοποιήσετε μια διαφορετική μέθοδο, αλλά για αυτό το παράδειγμα χρησιμοποιώ αυτήν την προσέγγιση.

Προχωρήστε και ανοίξτε actions/authenticationActions.jsκαι ενημερώστε το με τα ακόλουθα περιεχόμενα.

Εδώ εξάγω τη νέα loginUserActionλειτουργία με LOGIN_USERτύπο ενέργειας και user payload.

Πριν προχωρήσετε, προχωρήστε και ανοίξτε το actions/index.jsαρχείο και ενημερώστε το περιεχόμενό του με τα ακόλουθα.

Τώρα προχωρήστε και ανοίξτε το sagas/watchers.jsαρχείο και ενημέρωση του περιεχομένου του με τα ακόλουθα.

Εδώ απλώς εισάγω loginSagaκαι το καλώ όταν λαμβάνει τοLOGIN_USERδράση.

Δεν έχουμε loginSagaακόμη. Γι 'αυτό προχωρήστε και ανοίξτε τοsagas/authenticationSaga.jssaga και ενημερώστε τα περιεχόμενά του με τα ακόλουθα.

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

Τώρα ανοίξτε το services/authenticationService.jsυπηρεσία και ενημερώστε το περιεχόμενό της με τα ακόλουθα.

Εδώ προσθέτω loginUserService που κάνει σχεδόν το ίδιο με το registerUserService δηλ. Στέλνοντας ένα αίτημα ajax για να συνδεθείτε στον χρήστη.

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

Κάνει σχεδόν το ίδιο πράγμα registerReducer- ακρόαση LOGIN_USER_SUCCESSκαι LOGIN_USER_ERRORενέργειες και επιστροφή της νέας κατάστασης.

Τώρα ανοίξτε το reducers/index.jsαρχείο και ενημέρωση του περιεχομένου του με τον παρακάτω κώδικα.

Εδώ το εισάγω loginReducerκαι το συνδυάζω με registerπριν το επιστρέψω ως rootReducer.

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

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

Σελίδα πίνακα ελέγχου

Τώρα δημιουργήστε το components/dashboardPage.jsστοιχείο και τοποθετήστε τον παρακάτω κώδικα σε αυτό το στοιχείο.

Αυτό είναι ένα πολύ απλό στοιχείο - το μόνο που κάνει είναι να επιστρέψει το Dashboardκείμενο.

Τώρα ανοίξτε το routes/index.jsδρομολογήστε και ενημερώστε τα περιεχόμενά του με τα ακόλουθα.

Εδώ κάνω νέα πράγματα. Πρώτα εισάγω ένα dashboardPageκαι το προσθέτω route. Οταν οdashboardπρόσβαση στη διαδρομή, η requireAuthλειτουργία θα ενεργοποιηθεί. Αυτή η λειτουργία ελέγχει αν ο χρήστης είναι loggedInή όχι. Για να το ελέγξω, ψάχνωtokenστο localStorage, στο οποίο αποθηκεύτηκα στο loginPageστοιχείο κατά την επιτυχή σύνδεση. Εάν υπάρχει, τότε dashboardPageδίνεται στον χρήστη.

Τώρα, όταν ανανεώνετε τη σελίδα στο πρόγραμμα περιήγησής σας, εισαγάγετε ένα καταχωρημένο email και πατήστε enter, θα δείτε τα παρακάτω αποτελέσματα.

Λοιπόν, είναι, αυτό είναι ένα πλήρες σύστημα σύνδεσης που χρησιμοποιεί React, Redux και Redux-Saga. Εάν θέλετε να δείτε ολόκληρο το έργο, τότε κλωνοποιήστε αυτό το αποθετήριο.

Ελπίζω να σας άρεσε αυτό το post.