So verwenden Sie das React-Redux-Plugin

Dieses Mal zeige ich Ihnen, wie Sie das React-Redux-Plug-In verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des React-Redux-Plug-Ins gelten. Das Folgende ist ein praktischer Fall, nehmen wir einen sehen.

Einführung in React-Redux

React-Redux ist ein Plug-In, das bei der Entwicklung von React mithilfe von Redux verwendet wird React. Redux kann auch in Produkten, Vue und Angular verwendet werden. Hier finden Sie eine kurze Erklärung, wie React-Redux zum Entwickeln von React verwendet wird.

Beschreibung

Dieses Plug-in kann unseren Redux-Code prägnanter und schöner machen. Ich gehe davon aus, dass Sie bereits über eine Reaktionsumgebung verfügen, die „Hello World“ anzeigen kann, die mit „create-react-app“ erstellt wurde, und dass Sie Redux installiert haben.

Hinweis: Wenn es gerade mit „create-react-app“ erstellt wurde, müssen Sie npm run eject ausführen, um die personalisierten Einstellungen anzuzeigen, damit Sie die Konfiguration anpassen können.

Installation

npm i react-redux --save

Nutzung

react-redux stellt zwei wichtige Schnittstellen zur Verfügung: Provider, Connect, Using Mit diesem Plug- In können Sie das Abonnieren und Versenden von React-Redux vergessen, sie werden nicht mehr benötigt.

Codestruktur

//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();

Die äußerste Schicht der Anwendung im Provider, übergeben Sie den Store an sie und verwenden Sie ihn nur dieses Mal.

//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 ist dafür verantwortlich, die von der Komponente benötigten Parameter von außen zu erhalten. Nach der Definition über connect können die in Requisiten platzierten

-Attribute und -Methoden direkt über this.props abgerufen werden.

Das Folgende ist die Definition von Reduzierer.

//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);
  }
}

Verwenden Sie Dekoratoren, um Conect eleganter zu schreiben

Zuerst müssen Sie babel-plugin-transform-decorators-legacy installieren und in package.json konfigurieren.

Installieren

npm i babel-plugin-transform-decorators-legacy --save-dev Dies ist nur für Entwicklungszwecke, also installieren Sie es, um --save- dev

Konfiguration

Konfigurieren Sie das Plugins-Attribut von babel

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

Ändern Sie die ursprüngliche Schreibmethode

Verwenden Sie @connect, um es neu zu definieren und zu schreiben über der Klasse.

//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);

Lösung für die VS Code-Decorator-Eingabeaufforderung „experimentalDecorators“

Klicken Sie auf die Konfigurationsschaltfläche in der unteren linken Ecke von Visual Studio Code (oder Datei > Einstellungen > Konfiguration,

Windows-Umgebung), öffnen Sie das Benutzereinstellungsfenster, geben Sie „experimentalDecorators“ in das Suchfeld ein und finden Sie die Option wie folgt:

"javascript.implicitProjectConfig.experimentalDecorators": false

Ändern Sie sie einfach in „true“.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit Vue einen Countdown-Button implementiert

Wie man mit Vue eine Zwei schreibt -Wege-Datenbindung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das React-Redux-Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!