À propos de la connexion de React-redux dans React et Redux (tutoriel détaillé)

Cet article présente principalement la connexion entre React et Redux, réagir-redux L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

J'ai déjà exploré des choses liées à React et j'ai un projet SPA en main, donc je suis prêt à essayer Redux. Redux lui-même n'a aucune relation avec React. Il s'agit d'un module d'application Javscript général utilisé pour la gestion de l'état de l'application. Pour utiliser Redux dans un projet React, une meilleure façon est d'utiliser la bibliothèque React-Redux pour se connecter. Cela signifie que sans React-Redux, ces deux bibliothèques ne seront pas utilisées ensemble. React-Redux fournit une certaine encapsulation, mais plus. manière scientifique d'organiser le code, nous permettant d'utiliser Redux dans le code React plus confortablement.

Avant, je n'ai découvert React-redux qu'à travers la documentation Redux. Après une période de pratique, je vais parcourir le code source et faire quelques résumés pertinents. La version npm du code que je regarde est la v4.0.0, ce qui signifie que la version React utilisée est la 0.14.x.

react-redux fournit deux modules clés : Provider et connect.

Provider

Le module Provider est utilisé comme conteneur de l'ensemble de l'application. Il est enveloppé avec une autre couche au-dessus de votre conteneur d'application d'origine. simple. , ce qui signifie accepter le magasin Redux comme accessoire et le déclarer comme l'un des attributs du contexte. Les sous-composants peuvent facilement accéder au magasin via this.context.store après avoir déclaré contextTypes. Cependant, nos composants n'ont généralement pas besoin de faire cela. Le magasin est placé dans le contexte pour la connexion suivante.

Voici un exemple d'utilisation de Provider :

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById(&#39;root&#39;)
)

connect

Ce module est une véritable connexion entre Redux et React, ce qui arrive à be Le nom est également appelé connect.

Considérez d'abord le fonctionnement de Redux : d'abord, un état est maintenu dans le magasin, nous envoyons une action, puis le réducteur met à jour l'état en fonction de cette action.

est mappé à notre application React. L'état conservé dans le magasin est l'état de notre application. Un composant React sert de couche View et fait deux choses : rendre et répondre aux opérations de l'utilisateur. Se connecter consiste donc à transmettre les données nécessaires dans le magasin en tant qu'accessoires au composant React pour le rendu, et à envelopper le créateur d'action pour distribuer une action en réponse aux opérations de l'utilisateur.

D'accord, examinons en détail ce que fait le module de connexion. Commençons par son utilisation. Son API est la suivante :

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps est une fonction, et la valeur de retour représente l'état qui doit être fusionné dans les accessoires. La valeur par défaut est () => ({}), ce qui signifie que rien n'est transmis.

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps peut être une fonction. La valeur de retour représente les actionCreators qui doivent fusionner uniquement les accessoires. L'actionCreator ici aurait dû être empaqueté avec dispatch.

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

Il est plus pratique d'accepter un objet directement. À ce stade, la fonction de connexion le convertira en fonction. Cette fonction est exactement la même que l'exemple ci-dessus.

mergeProps est utilisé pour personnaliser le processus de fusion. Ce qui suit est le processus par défaut. La valeur de parentProps correspond aux accessoires du composant lui-même. Vous pouvez constater que si le même nom apparaît sur les accessoires du composant, il sera écrasé.

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

les options ont deux commutateurs : pure représente s'il faut activer l'optimisation. Les détails seront mentionnés ci-dessous. La valeur par défaut est true withRef est utilisé pour donner une référence au composant contenu dans le package. obtenu via la méthode getWrappedInstance ref, la valeur par défaut est false.

connect renvoie une fonction qui accepte le constructeur d'un composant React comme objet de connexion, et renvoie enfin le constructeur du composant connecté.

Puis quelques questions :

1. Comment le composant React répond-il aux modifications du magasin ?

2. Pourquoi connect fusionne-t-il sélectivement certains accessoires au lieu de transmettre directement l'ensemble de l'état ?

3. Qu'est-ce que pure optimise ?

Nous appelons la fonction renvoyée par connect Connector. Elle renvoie un composant interne appelé Connect En plus d'emballer le composant d'origine, elle écoute également les modifications de Redux Store, afin de. permettre aux composants qu'il enveloppe de répondre aux changements stockés :

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

Mais généralement, ce que nous connectons est un composant Container, qui ne porte pas tout l'état de l'application, mais notre gestionnaire Il répond à tous les changements d'état, donc ce que nous devons optimiser est : lorsque storeState change, le composant React correspondant sera-t-il restitué uniquement lorsque nous dépendons vraiment de cette partie du changement d'état. Alors, quelle est la partie dont nous dépendons vraiment ? Il est obtenu via mapStateToProps et mapDispatchToProps.

La méthode d'optimisation spécifique consiste à archiver ShouldComponentUpdate. Si ShouldComponentUpdate renvoie true uniquement lorsque les propres accessoires du composant changent, ou le résultat des modifications de mapStateToProps, ou le résultat des modifications de mapDispatchToProps, la méthode de vérification est Comparaison de ShallowEqual. .

Donc pour un certain réducteur :

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象，可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

De plus, lors de la connexion, veillez à mapper l'état ou les actionsCreators dont vous avez vraiment besoin dans les accessoires pour éviter une perte de performances inutile.

Enfin, selon l'API connect, nous avons constaté que nous pouvons utiliser la fonction de décorateur ES7 pour correspondre à la méthode d'écriture de React ES6 :

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

Ce qui précède est ce que j'ai compilé pour tout le monde . J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Résumé de l'algorithme de tri JS

Comment créer un cône en utilisant JS+canvas

Comment implémenter le routage dans vue -router Chargement paresseux

Comment implémenter le débogage du point d'arrêt des fichiers ts dans Angular2

Comment implémenter le défilement de la page Web vers le haut

Configuration de la structure des dossiers dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!