Analyse de l'utilisation réelle du projet de plug-in React-Redux

Cette fois, je vais vous apporter une analyse de l'utilisation réelle du projet de plug-in réagir-redux Quelles sont les précautions pour l'utilisation réelle du projet de plug-in réagir-redux ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Vous pouvez d'abord consulter mon introduction simple à Redux

L'introduction à React-Redux

React-redux consiste à utiliser redux pour développer React Un plug-in utilisé à l'époque. De plus, Redux n'est pas un produit React. Redux peut également être utilisé dans Vue et Angular. Voici une brève explication de la façon d'utiliser React-Redux. développer réagir.

Description

Ce plug-in peut rendre notre code redux plus concis et plus beau. Je suppose que vous disposez déjà d'un environnement de réaction capable d'afficher Hello World créé à l'aide de create-react-app et que vous avez installé Redux.

Remarque : s'il vient d'être créé à l'aide de create-react-app, vous devez exécuter npm run eject pour afficher les paramètres personnalisés, afin de pouvoir personnaliser la configuration.

Installation

npm i react-redux --save

Utilisation

react-redux fournit deux interfaces importantes : Fournisseur, Connectez-vous, Avec cette prise -in, vous pouvez oublier l'abonnement et la répartition de React-Redux, et ils ne seront plus nécessaires.

Structure du code

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

La couche la plus externe de l'application dans Provider, transmettez-lui le magasin et utilisez-la uniquement cette fois.

//app.js
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <p className="App">
    <h1>现在有美女{this.props.num}个。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </p >
  );
 }
}
//定义把state中哪个属性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定义把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其实就是一个高阶组件，把app传进去，返回一个新的app组件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;

connect se charge d'obtenir les paramètres requis par le composant depuis l'extérieur. Après avoir été définies via connect, les propriétés et méthodes placées dans props peuvent être obtenues directement via this.props.

Ce qui suit est la définition du réducteur.

//react.redux.js
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Utilisez des décorateurs pour écrire Conect plus élégamment

Vous devez d'abord installer babel-plugin-transform-decorators-legacy et l'ajouter dans la configuration package.json .

Installer

npm i babel-plugin-transform-decorators-legacy --save-dev Ceci est uniquement à des fins de développement, alors installez-le sur --save- dev

Configuration

Configurer l'attribut plugins de babel

 "babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   ["transform-decorators-legacy"]
  ]
 }

Modifier la méthode d'écriture d'origine
Utiliser @connect pour la redéfinir et écrivez-le au-dessus de la classe.

//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

Solution à l'invite du décorateur VS Code "experimentalDecorators"

Cliquez sur le bouton de configuration dans le coin inférieur gauche de Visual Studio Code (ou sur Fichier>Préférences> Configuration, environnement Windows), ouvrez la fenêtre des paramètres utilisateur, saisissez « experimentalDecorators » dans la zone de recherche et constatez que l'option peut être trouvée, comme suit :

"javascript.implicitProjectConfig.experimentalDecorators": false

Remplacez-la simplement par true.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour créer un proxy

Utilisez jquery pour obtenir le contenu spécifique du fichier téléchargé

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!