À propos de l'utilisation de Connect Decorator dans React-Redux

Cet article présente principalement l'explication détaillée de l'utilisation du décorateur @connect dans React-redux. Maintenant, je le partage avec vous et le donne comme référence.

J'ai récemment réfléchi à quelques conseils sur React. Cet article explique comment utiliser les décorateurs pour écrire Connect dans Redux.

Habituellement, nous avons besoin d'un réducteur et d'une action, puis utilisons connect pour envelopper votre composant. Supposons que vous ayez déjà un réducteur avec la clé main et un action.js. Notre App.js s'écrit généralement comme ceci :

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

ok, il n'y a pas de problème là-dedans. En ce qui concerne l’utilisation de Connect, vous sentez-vous familier ? C'est un emballage typique. Je dois utiliser un décorateur pour le décorer ici. Je l'ai un peu modifié :

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

C'est fait et ça a l'air confortable. Dans notre projet actuel, il peut y avoir de nombreux petits composants sous un seul module, et ils partagent tous la même action et le même réducteur. Est-ce un peu trop compliqué d'écrire cela dans chaque composant ? Il y a trop de code redondant.

En fait, vous pouvez extraire connect. Par exemple, écrivez un connect.js :

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

export default connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)

puis utilisez-le dans les composants qui doivent être utilisés :

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

C'est ok Par rapport à l'usage original, n'est-il pas évidemment plus prétentieux et plus facile à utiliser ?

Il est à noter que des décorateurs sont utilisés ici. Vous devez installer le module babel-plugin-transform-decorators-legacy, puis le configurer dans babel :

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

Si vous Si vous utilisez vscode, vous pouvez ajouter le fichier jsconfig.json dans le répertoire racine du projet pour éliminer les avertissements de code :

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

ok, c'est vraiment par ici. En fait, vous pouvez continuer à penser à Connect. Par exemple, vous pouvez écrire une connexion universelle qui peut être utilisée par tous les composants de tous les modules. Je ne continuerai pas à écrire cet article, je le réécrirai lorsque j'en aurai l'occasion.

J'ai toujours pensé qu'il n'était pas bon d'appeler @ cette chose en js un décorateur. Cela semble trop moche. Il vaudrait mieux l'appeler une annotation comme en java.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Réponse détaillée : Quel impact les changements de vue ont-ils sur les composants ?

Comment emballer à l'aide de Parcel

Explication détaillée de la façon de configurer l'outil d'emballage dans Vue

En vue Comment implémenter watch pour détecter automatiquement les changements de données

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!