Comment utiliser le décorateur de connect dans React-Redux

Cet article présente principalement l'explication détaillée de l'utilisation du décorateur @connect dans React-redux. L'éditeur pense que c'est assez 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'espère que cela pourra aider tout le monde.

J'ai récemment réfléchi à quelques astuces pour réagir. 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, ce n'est pas le cas. travail Quel problème. En ce qui concerne l’utilisation de Connect, vous sentez-vous familier ? C'est un emballage typique, je dois utiliser des décorateurs pour le décorer ici. Je l'ai légèrement 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>
  }
}

Il a l'air confortable maintenant. 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 en ont besoin. à utiliser. :

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, et que le module babel-plugin-transform-decorators-legacy doit être installé puis configuré dans babel :

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

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, voilà, c'est vraiment fini. 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.

Recommandations associées :

Explication détaillée du téléchargement de la pièce jointe HttpURLConnection en Java

Erreur de base de données MySQL : solution au trop grand nombre de connexions

10 contenus recommandés de mysqli_connect

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!