Comment utiliser le plugin React-Redux

Cette fois, je vais vous montrer comment utiliser le plug-in réagir-redux et quelles sont les précautions lors de l'utilisation du plug-in réagir-redux. Ce qui suit est un cas pratique, prenons un. regarder.

Introduction à React-redux

React-redux est un plug-in utilisé lors du développement de React à l'aide de Redux. De plus, Redux ne l'est pas. React. redux peut également être utilisé dans products, vue et angulaire. Voici une brève explication de la façon d'utiliser React-Redux pour développer React.

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éfinis via connect, les attributs et méthodes placés dans props peuvent être obtenus 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 le redéfinir et l'écrire 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

Changez simplement c'est vrai.

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 implémenter un bouton de compte à rebours

Comment utiliser Vue pour écrire un deux liaison de données -way

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!