Tatsächliche Nutzungsanalyse des React-Redux-Plug-In-Projekts

Dieses Mal werde ich die tatsächliche Verwendung des React-Redux-Plug-In-Projekts analysieren. Was sind die Vorsichtsmaßnahmen für die tatsächliche Verwendung des React-Redux-Plug-In-Projekts? Werfen wir einen Blick darauf.

Sie können sich zuerst meine einfache Einführung in Redux ansehen

Einführung in React-Redux

React-Redux verwendet Redux Um React zu entwickeln, ist Redux kein React-Produkt. Hier finden Sie eine kurze Erklärung, wie React-Redux zum Entwickeln 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 Eigenschaften 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 Vue bedient, um einen Proxy zu erstellen

Verwenden Sie JQuery, um den spezifischen Inhalt des zu erhalten hochgeladene Datei

Das obige ist der detaillierte Inhalt vonTatsächliche Nutzungsanalyse des React-Redux-Plug-In-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!