Πώς να συνδέσετε το React με το Redux - έναν διαγραμματικό οδηγό

Αυτή η ανάρτηση απευθύνεται σε άτομα που γνωρίζουν ήδη το React και το Redux. Αυτό θα τους βοηθήσει να κατανοήσουν καλύτερα πώς λειτουργούν τα πράγματα κάτω από την κουκούλα. Όταν μπήκα για πρώτη φορά στο σύμπαν του React;, πριν από 3 χρόνια, είχα πολύ δύσκολο χρόνο να καταλάβω πώς λειτουργούσαν οι Redux's m apStateToProps και m apDispatchToProps και ήταν διαθέσιμοι στο στοιχείο React. Ακολουθεί ένας διαγραμματικός οδηγός για να κατανοήσετε καλύτερα πώς λειτουργεί το Redux's c onnect με το React.

Ας πούμε ότι έχουμε ένα Searchσυστατικό.

Και ένα κλασικό κατάστημα Redux.

Ας συμπληρώσουμε το κατάστημα Redux με Actionαποστολείς και Reducerπολιτεία.

Το Reducer defaultStateμοιάζει με αυτό. Η actionπαράμετρος μέσα στη Reducerσυνάρτηση προέρχεται από την αποστολήAction.

Ας συνδέσουμε το στοιχείο αναζήτησης React με το κατάστημα Redux. Η βιβλιοθήκη React-Redux έχει επίσημες συνδέσεις React για το Redux.

Παρέχει τη connectλειτουργία σύνδεσης του εξαρτήματος στο κατάστημα.

mapDispatchToPropsσημαίνει αντιστοιχίστε τη dispatchλειτουργία της δράσης για να αντιδράσετε το στοιχείο this.props.

Το ίδιο ισχύει για mapStateToProps, όπου η κατάσταση του μειωτή χαρτογραφείται στο στοιχείο του React this.props.

  1. Συνδέστε το React στο Redux.
  2. Το mapStateToPropsκαι mapDispatchToPropsασχολείται με το κατάστημα Redux stateκαι dispatch, αντίστοιχα.
  3. Το Reducer's stateand the Action's dispatchείναι διαθέσιμο μέσω this.propsτου στοιχείου React.

Ας συνοψίσουμε ολόκληρη τη ροή εργασίας του React to Redux connect μέσω ενός κουμπιού κλικ από το στοιχείο React search.

  1. Κάντε κλικ στο submitκουμπί στο στοιχείο React search
  2. Η clickσυνάρτηση αποστέλλει μια ενέργεια. Η dispatchσυνάρτηση Action συνδέεται με το στοιχείο αναζήτησης μέσω mapDispatchToPropsκαι διατίθεται στοthis.props
  3. (εκτός πεδίου για αυτήν την ανάρτηση) Η ενέργεια που αποστέλλεται είναι υπεύθυνη για τα fetchδεδομένα και αποστέλλει μια άλλη ενέργεια για την ενημέρωση της κατάστασης μειωτή
  4. Η κατάσταση Reducer ενημερώνεται με τα νέα δεδομένα αναζήτησης που διατίθενται από το Βήμα 3.
  5. Η κατάσταση μειωτή είναι ήδη συνδεδεμένη this.propsστο στοιχείο αναζήτησης μέσωmapStateToProps
  6. this.props έχει τα πιο πρόσφατα δεδομένα αναζήτησης και η προβολή επανεμφανίζεται για να εμφανίσει τα ενημερωμένα αποτελέσματα αναζήτησης