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

Κάθε σύνολο δεδομένων που χρειάζεται ιστορικό γεγονότων μπορεί να θεωρηθεί stateful. Η διαχείριση της κατάστασης μπορεί να είναι δύσκολη και επιρρεπής σε σφάλματα, αλλά η εργασία με αμετάβλητα δεδομένα (αντί για μεταβλητές) και ορισμένες υποστηρικτικές τεχνολογίες - συγκεκριμένα το Redux, για τους σκοπούς αυτού του άρθρου - μπορεί να βοηθήσει σημαντικά.

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

Η χρήση αμετάβλητων καταστάσεων μάς επιτρέπει να γράψουμε κώδικα που μπορεί γρήγορα να πει εάν η κατάσταση έχει αλλάξει, χωρίς να χρειάζεται να κάνουμε μια αναδρομική σύγκριση των δεδομένων, η οποία είναι συνήθως πολύ, πολύ πιο γρήγορη.

Αυτό το άρθρο θα καλύψει τις πρακτικές εφαρμογές του Redux κατά τη διαχείριση της κατάστασης μέσω δημιουργών δράσης, καθαρών λειτουργιών, συντελεστών μείωσης, ακάθαρτων ενεργειών με το Redux-saga και το Redux Thunk και, τέλος, τη χρήση του Redux with React. Τούτου λεχθέντος, υπάρχουν πολλές εναλλακτικές λύσεις για το Redux, όπως βιβλιοθήκες MobX, Relay και Flux.

Γιατί η Redux;

Η βασική πτυχή που διαχωρίζει το Redux από τα περισσότερα άλλα κοντέινερ κατάστασης, όπως MobX, Relay και τις περισσότερες άλλες εφαρμογές με βάση το Flux είναι ότι το Redux έχει μία μόνο κατάσταση που μπορεί να τροποποιηθεί μόνο μέσω 'ενεργειών' (απλά αντικείμενα JavaScript), τα οποία αποστέλλονται στο Κατάστημα Redux. Τα περισσότερα άλλα καταστήματα δεδομένων έχουν την κατάσταση που περιέχεται στα στοιχεία του React, σας επιτρέπουν να έχετε πολλά καταστήματα ή / και να χρησιμοποιείτε κατάσταση μεταβλητής.

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

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

import Immutable from 'seamless-immutable' const initialState = Immutable([]) // create immutable array via seamless-immutable /** * a reducer takes a state (the current state) and an action object (a plain JavaScript object that was dispatched via dispatch(..) and potentially returns a new state. */ function addUserReducer(state = initialState, action) { if (action.type === 'USERS_ADD') { return state.concat(action.payload) } return state // note that a reducer MUST return a value } // somewhere else... store.dispatch({ type: 'USERS_ADD', payload: user }) // dispatch an action that causes the reducer to execute and add the user

Η ενασχόληση με καθαρές λειτουργίες επιτρέπει στο Redux να υποστηρίζει εύκολα πολλές περιπτώσεις χρήσης που γενικά δεν γίνονται εύκολα με μεταλλακτική κατάσταση, όπως:

• Χρονικό ταξίδι (Επιστροφή στο παρελθόν σε προηγούμενη κατάσταση)
• Καταγραφή (Παρακολούθηση κάθε ενέργειας για να μάθετε τι προκάλεσε μια μετάλλαξη στο κατάστημα)
• Συνεργατικά περιβάλλοντα (όπως το GoogleDocs, όπου οι ενέργειες είναι απλά αντικείμενα JavaScript και μπορούν να σειριοποιηθούν, να σταλούν μέσω του καλωδίου και να αναπαραχθούν σε άλλο μηχάνημα)
• Εύκολη αναφορά σφαλμάτων (Απλώς στείλτε τη λίστα των ενεργειών που αποστέλλονται και επαναλάβετε την αναπαραγωγή τους για να λάβετε την ίδια κατάσταση)
• Βελτιστοποιημένη απόδοση (Τουλάχιστον σε πλαίσια που καθιστούν το εικονικό DOM ως συνάρτηση της κατάστασης, όπως το React: λόγω της μεταβλητότητας, μπορείτε εύκολα να διαπιστώσετε εάν κάτι έχει αλλάξει συγκρίνοντας τις αναφορές, σε αντίθεση με την αναδρομική σύγκριση των αντικειμένων)
• Ελέγξτε εύκολα τους μειωτές σας, καθώς οι καθαρές λειτουργίες μπορούν εύκολα να ελεγχθούν μονάδες

Δημιουργοί δράσης

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

εκμάθηση c++\

Ένας δημιουργός δράσης στο Redux είναι απλά μια βοηθητική συνάρτηση που επιστρέφει ένα απλό αντικείμενο JavaScript που περιγράφει μια μετάλλαξη. Αυτό βοηθά στη μείωση του επαναλαμβανόμενου κώδικα και διατηρεί όλες τις ενέργειές σας σε ένα μέρος:

export function usersFetched(users) { return { type: 'USERS_FETCHED', payload: users, } } export function usersFetchFailed(err) { return { type: 'USERS_FETCH_FAILED', payload: err, } } // reducer somewhere else... const initialState = Immutable([]) // create immutable array via seamless-immutable /** * a reducer takes a state (the current state) and an action object (a plain JavaScript object that was dispatched via dispatch(..) and potentially returns a new state. */ function usersFetchedReducer(state = initialState, action) { if (action.type === 'USERS_FETCHED') { return Immutable(action.payload) } return state // note that a reducer MUST return a value }

Χρήση του Redux με αμετάβλητες βιβλιοθήκες

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

Εξετάστε το ακόλουθο παράδειγμα κώδικα ενός προβλήματος που θα αντιμετωπίσετε χωρίς βιβλιοθήκη για να σας προστατεύσει:

const initialState = [] function addUserReducer(state = initialState, action) { if (action.type === 'USERS_ADD') { state.push(action.payload) // NOTE: mutating action!! return state } return state // note that a reducer MUST return a value }

Σε αυτό το παράδειγμα κώδικα, το χρονικό ταξίδι θα σπάσει καθώς η προηγούμενη κατάσταση θα είναι τώρα ίδια με την τρέχουσα κατάσταση, τα καθαρά στοιχεία ενδέχεται δυνητικά να μην ενημερώνονται (ή να αποδίδονται ξανά) καθώς η αναφορά στην κατάσταση δεν έχει αλλάξει ακόμα κι αν τα δεδομένα Το περιεχόμενο έχει αλλάξει και οι μεταλλάξεις είναι πολύ πιο δύσκολες.

Χωρίς αμετάβλητη βιβλιοθήκη, χάνουμε όλα τα οφέλη που προσφέρει η Redux. Συνιστάται λοιπόν να χρησιμοποιείτε μια αμετάβλητη βοηθητική βιβλιοθήκη, όπως το immutable.js ή το seamless-immutable, ειδικά όταν εργάζεστε σε μια μεγάλη ομάδα με πολλά χέρια που αγγίζουν τον κωδικό.

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

Αμετάβλητο.js

Το Immutable.js είναι μια βιβλιοθήκη, που έχει κατασκευαστεί από το Facebook, με πιο λειτουργικό στυλ για δομές δεδομένων, όπως Χάρτες, Λίστες, Σύνολα και Ακολουθίες. Η βιβλιοθήκη των αμετάβλητων μόνιμων δομών δεδομένων εκτελεί την ελάχιστη δυνατή αντιγραφή μεταξύ διαφορετικών καταστάσεων.

Πλεονεκτήματα:

hedge funds με τις καλύτερες επιδόσεις

• Διαρθρωτική κοινή χρήση
• Πιο αποτελεσματικό στις ενημερώσεις
• Περισσότερη αποδοτικότητα μνήμης
• Διαθέτει μια σειρά βοηθητικών μεθόδων για τη διαχείριση ενημερώσεων

Μειονεκτήματα:

• Δεν λειτουργεί απρόσκοπτα με υπάρχουσες βιβλιοθήκες JS (δηλ. Lodash, ramda)
• Απαιτείται μετατροπή από και προς (σεJS / fromJS), ειδικά κατά την ενυδάτωση / αφυδάτωση και απόδοση

Άνευ ραφής-αμετάβλητο

Seamless-immutable είναι μια βιβλιοθήκη για αμετάβλητα δεδομένα που είναι συμβατή προς τα πίσω μέχρι το ES5.

Βασίζεται σε συναρτήσεις καθορισμού ιδιοτήτων ES5, όπως defineProperty(..) για να απενεργοποιήσετε τις μεταλλάξεις σε αντικείμενα. Ως εκ τούτου, είναι απόλυτα συμβατό με υπάρχουσες βιβλιοθήκες όπως το lodash και το Ramda. Μπορεί επίσης να απενεργοποιηθεί κατά την παραγωγή, παρέχοντας ένα δυνητικά σημαντικό κέρδος απόδοσης.

Πλεονεκτήματα:

• Λειτουργεί απρόσκοπτα με υπάρχουσες βιβλιοθήκες JS (δηλ. Lodash, ramda)
• Δεν απαιτείται επιπλέον κωδικός για την υποστήριξη της μετατροπής
• Οι έλεγχοι μπορούν να απενεργοποιηθούν στην παραγωγή παραγωγής, αυξάνοντας την απόδοση

Μειονεκτήματα:

• Χωρίς δομική κοινή χρήση - αντικείμενα / συστοιχίες αντιγράφονται ρηχά, το καθιστά πιο αργό για μεγάλα σύνολα δεδομένων
• Όχι αποδοτική μνήμη

Redux και πολλαπλοί μειωτές

Ένα άλλο χρήσιμο χαρακτηριστικό του Redux είναι η δυνατότητα σύνθεσης μειωτών μαζί. Αυτό σας επιτρέπει να δημιουργήσετε πολύ πιο περίπλοκες εφαρμογές και σε μια εφαρμογή οποιουδήποτε σημαντικού μεγέθους, αναπόφευκτα θα έχετε πολλούς τύπους κατάστασης (τρέχων χρήστης, η λίστα των δημοσιεύσεων που φορτώθηκαν, και τα λοιπά). Η Redux υποστηρίζει (και ενθαρρύνει) αυτήν την περίπτωση χρήσης παρέχοντας φυσικά τη λειτουργία combineReducers:

import { combineReducers } from 'redux' import currentUserReducer from './currentUserReducer' import postsListReducer from './postsListReducer' export default combineReducers({ currentUser: currentUserReducer, postsList: postsListReducer, })

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

Ακατάστατες ενέργειες στο Redux

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

«Middleware» είναι ο όρος που χρησιμοποιείται για συναρτήσεις που μπορούν να παρακολουθούν τις ενέργειες που αποστέλλονται. Μόλις υποκλαπούν, μπορεί να κάνει πράγματα όπως να μετατρέψει την ενέργεια ή να αποστείλει μια ασύγχρονη ενέργεια, όπως το middleware σε άλλα πλαίσια (όπως το Express.js).

Δύο πολύ κοινές βιβλιοθήκες μεσαίου λογισμικού είναι οι Redux Thunk και Redux-saga. Το Redux Thunk είναι γραμμένο σε επιτακτικό στυλ, ενώ το Redux-saga είναι γραμμένο σε λειτουργικό στυλ. Ας συγκρίνουμε και τα δύο.

Redux Thunk

Το Redux Thunk υποστηρίζει ακάθαρτες ενέργειες στο Redux χρησιμοποιώντας thunks, λειτουργίες που επιστρέφουν άλλες λειτουργίες με δυνατότητα αλυσίδας. Για να χρησιμοποιήσετε το Redux-Thunk, πρέπει πρώτα να τοποθετήσετε το μεσαίο λογισμικό Redux Thunk στο κατάστημα:

import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' const store = createStore( myRootReducer, applyMiddleware(thunk), // here, we apply the thunk middleware to R )

Τώρα μπορούμε να κάνουμε ακάθαρτες ενέργειες (όπως εκτέλεση κλήσης API) στέλνοντας ένα thunk στο κατάστημα Redux:

store.dispatch( dispatch => { return api.fetchUsers() .then(users => dispatch(usersFetched(users)) // usersFetched is a function that returns a plain JavaScript object (Action) .catch(err => dispatch(usersFetchError(err)) // same with usersFetchError } )

Είναι σημαντικό να σημειωθεί ότι η χρήση thunks μπορεί να κάνει τον κώδικά σας δύσκολο να δοκιμαστεί και καθιστά πιο δύσκολη τη λογική μέσω της ροής κώδικα.

Redux-έπος

Το Redux-saga υποστηρίζει ακάθαρτες ενέργειες μέσω ενός ES6 (ES2015) χαρακτηριστικό που ονομάζεται γεννήτριες και μια βιβλιοθήκη λειτουργικών / καθαρών βοηθών. Το σπουδαίο πράγμα για τις γεννήτριες είναι ότι μπορούν να συνεχιστούν και να τεθούν σε παύση και το συμβόλαιό τους API τους καθιστά εξαιρετικά εύκολο στη δοκιμή.

πώς να αποκτήσετε συμβουλευτικούς πελάτες

Ας δούμε πώς μπορούμε να βελτιώσουμε την αναγνωσιμότητα και τη δυνατότητα δοκιμής της προηγούμενης μεθόδου thunk χρησιμοποιώντας sagas!

Αρχικά, ας τοποθετήσουμε το μεσαίο λογισμικό Redux-saga στο κατάστημά μας:

import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' import rootReducer from './rootReducer' import rootSaga from './rootSaga' // create the saga middleware const sagaMiddleware = createSagaMiddleware() // mount the middleware to the store const store = createStore( rootReducer, applyMiddleware(sagaMiddleware), ) // run our saga! sagaMiddleware.run(rootSaga)

Σημειώστε ότι το run(..) Η συνάρτηση πρέπει να καλείται με το έπος για να αρχίσει να εκτελείται.

Ας δημιουργήσουμε το έπος μας:

import { call, put, takeEvery } from 'redux-saga/effects' // these are saga effects we'll use export function *fetchUsers(action) { try { const users = yield call(api.fetchUsers) yield put(usersFetched(users)) } catch (err) { yield put(usersFetchFailed(err)) } } export default function *rootSaga() { yield takeEvery('USERS_FETCH', fetchUsers) }

Ορίσαμε δύο συναρτήσεις γεννήτριας, μία που παίρνει τη λίστα χρηστών και το rootSaga. Παρατηρήστε ότι δεν καλέσαμε api.fetchUsers άμεσα αλλά αντίθετα το έδωσε σε ένα αντικείμενο κλήσης. Αυτό συμβαίνει επειδή το Redux-saga παρεμποδίζει το αντικείμενο κλήσης και εκτελεί τη λειτουργία που περιέχεται μέσα για τη δημιουργία ενός καθαρού περιβάλλοντος (όσον αφορά τις γεννήτριες σας).

rootSaga αποδίδει μία κλήση σε μια συνάρτηση που ονομάζεται takeEvery, που λαμβάνει κάθε ενέργεια που αποστέλλεται με έναν τύπο USERS_FETCH και καλεί το fetchUsers ιστορία με τη δράση που έκανε. Όπως μπορούμε να δούμε, αυτό δημιουργεί ένα πολύ προβλέψιμο μοντέλο ανεπιθύμητων ενεργειών για το Redux, το οποίο διευκολύνει τη δοκιμή!

Δοκιμή Sagas

Ας δούμε πώς οι γεννήτριες κάνουν τα σάγκα μας εύκολα στη δοκιμή. Θα χρησιμοποιούμε μόκα σε αυτό το μέρος για να εκτελέσετε τις δοκιμές μονάδας μας και Τάι για ισχυρισμούς.

Επειδή τα sagas αποδίδουν απλά αντικείμενα JavaScript και εκτελούνται μέσα σε μια γεννήτρια, μπορούμε εύκολα να ελέγξουμε ότι εκτελούν τη σωστή συμπεριφορά χωρίς να χλευάζουν καθόλου! Λάβετε υπόψη ότι call , take , put, κ.λπ. είναι απλά απλά αντικείμενα JavaScript που παρακωλύονται από το μεσαίο λογισμικό Redux-saga.

import { take, call } from 'redux-saga/effects' import { expect } from 'chai' import { rootSaga, fetchUsers } from '../rootSaga' describe('saga unit test', () => { it('should take every USERS_FETCH action', () => { const gen = rootSaga() // create our generator iterable expect(gen.next().value).to.be.eql(take('USERS_FETCH')) // assert the yield block does have the expected value expect(gen.next().done).to.be.equal(false) // assert that the generator loops infinitely }) it('should fetch the users if successful', () => { const gen = fetchUsers() expect(gen.next().value).to.be.eql(call(api.fetchUsers)) // expect that the call effect was yielded const users = [ user1, user2 ] // some mock response expect(gen.next(users).value).to.be.eql(put(usersFetched(users)) }) it('should fail if API fails', () => { const gen = fetchUsers() expect(gen.next().value).to.be.eql(call(api.fetchUsers)) // expect that the call effect was yielded const err = { message: 'authentication failed' } // some mock error expect(gen.throw(err).value).to.be.eql(put(usersFetchFailed(err)) }) })

Εργασία με την React

Αν και το Redux δεν συνδέεται με συγκεκριμένη συνοδευτική βιβλιοθήκη, λειτουργεί ιδιαίτερα καλά με React.js δεδομένου ότι τα στοιχεία React είναι καθαρές συναρτήσεις που λαμβάνουν μια κατάσταση ως είσοδο και παράγουν ένα εικονικό DOM ως έξοδο.

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

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

Τα στοιχεία του κοντέινερ, από την άλλη πλευρά, περιγράφουν πώς πρέπει να λειτουργούν τα πράγματα, γνωρίζουν το Redux, αποστέλλουν ενέργειες Redux απευθείας για την εκτέλεση μεταλλάξεων και γενικά δημιουργούνται από το React-Redux. Συχνά συνδυάζονται με ένα στοιχείο παρουσίασης, παρέχοντας τα στηρίγματα του.

Ας γράψουμε ένα στοιχείο παρουσίασης και να το συνδέσουμε στο Redux μέσω του React-Redux:

const HelloWorld = ({ count, onButtonClicked }) => ( Hello! You've clicked the button {count} times! Click me ) HelloWorld.propTypes = { count: PropTypes.number.isRequired, onButtonClicked: PropTypes.func.isRequired, }

Σημειώστε ότι αυτό είναι ένα 'χαζή' στοιχείο που βασίζεται πλήρως στα στηρίγματα για να λειτουργήσει. Αυτό είναι υπέροχο, γιατί κάνει το Αντιδραστικό στοιχείο εύκολο στη δοκιμή και εύκολο στη σύνθεση . Ας δούμε πώς να συνδέσουμε αυτό το στοιχείο με τη Redux τώρα, αλλά πρώτα ας καλύψουμε τι είναι ένα Ανώτερο Τάγμα Παραγγελίας.

Εξαρτήματα υψηλότερης τάξης

Το React-Redux παρέχει μια βοηθητική λειτουργία που ονομάζεται connect( .. ) που δημιουργεί ένα στοιχείο υψηλότερης τάξης από ένα στοιχείο 'χαζή' React που γνωρίζει το Redux.

Το React δίνει έμφαση στην επεκτασιμότητα και την επαναχρησιμοποίηση μέσω της σύνθεσης, η οποία συμβαίνει όταν τυλίγετε στοιχεία σε άλλα συστατικά. Η συσκευασία αυτών των στοιχείων μπορεί να αλλάξει τη συμπεριφορά τους ή να προσθέσει νέα λειτουργικότητα. Ας δούμε πώς μπορούμε να δημιουργήσουμε ένα στοιχείο υψηλότερης τάξης από το στοιχείο παρουσίασης που γνωρίζει το Redux - ένα στοιχείο κοντέινερ.

πώς να εντοπίσετε διαρροές μνήμης

Δείτε πώς το κάνετε:

import { connect } from 'react-redux' const mapStateToProps = state => { // state is the state of our store // return the props that we want to use for our component return { count: state.count, } } const mapDispatchToProps = dispatch => { // dispatch is our store dispatch function // return the props that we want to use for our component return { onButtonClicked: () => { dispatch({ type: 'BUTTON_CLICKED' }) }, } } // create our enhancer function const enhancer = connect(mapStateToProps, mapDispatchToProps) // wrap our 'dumb' component with the enhancer const HelloWorldContainer = enhancer(HelloWorld) // and finally we export it export default HelloWorldContainer

Σημειώστε ότι ορίσαμε δύο συναρτήσεις, mapStateToProps και mapDispatchToProps .

mapStateToProps είναι μια καθαρή συνάρτηση του (state: Object) που επιστρέφει ένα αντικείμενο που υπολογίζεται από την κατάσταση Redux. Αυτό το αντικείμενο θα συγχωνευτεί με τα στηρίγματα που περνούν στο τυλιγμένο στοιχείο. Αυτό είναι επίσης γνωστό ως επιλογέας, καθώς επιλέγει τμήματα της κατάστασης Redux για συγχώνευση στα στηρίγματα του στοιχείου.

mapDispatchToProps είναι επίσης μια καθαρή συνάρτηση, αλλά μία από την (αποστολή: (Action) => void) που επιστρέφει ένα αντικείμενο που υπολογίστηκε από τη συνάρτηση αποστολής Redux. Αυτό το αντικείμενο θα συγχωνευτεί επίσης με τα στηρίγματα που περνούν στο τυλιγμένο στοιχείο.

Τώρα για να χρησιμοποιήσουμε το στοιχείο κοντέινερ μας πρέπει να χρησιμοποιήσουμε το Provider στοιχείο στο React-Redux για να πείτε στο στοιχείο κοντέινερ τι κατάστημα θα χρησιμοποιήσει:

import { Provider } from 'react-redux' import { render } from 'react-dom' import store from './store' // where ever your Redux store resides import HelloWorld from './HelloWorld' render( ( ), document.getElementById('container') )

Το Provider Το στοιχείο μεταδίδει το κατάστημα σε οποιαδήποτε θυγατρικά στοιχεία που εγγράφονται στο κατάστημα Redux, διατηρώντας τα πάντα σε ένα μέρος και μειώνοντας τα σημεία σφάλματος ή μετάλλαξης!

Δημιουργία εμπιστοσύνης κώδικα με το Redux

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