React+Redux von Grund auf

Dieses Mal werde ich React+Redux von Grund auf vorstellen. Was sind die Vorsichtsmaßnahmen, um React+Redux von Grund auf neu zu starten?

Umgebungsvorbereitung

Der Einfachheit halber wird hier die Create-React-App verwendet, um die Reaktionsumgebung zu erstellen

create-react-app mydemo

Popup-Konfiguration

Wenn Sie die Reaktionskonfiguration anpassen müssen, müssen Sie den folgenden Befehl ausführen, um die Konfigurationsdatei aufzurufen.

npm run eject

Redux installieren

npm i redux --save

Einfaches Verständnis

Die einfache Verwendung von Redux besteht darin, Informationen über den Store zu abonnieren und zu veröffentlichen .

Aktion durch Abonnieren abonnieren und Aktion durch Versand auslösen. Der Reduzierer definiert, was jede Aktion tun muss.

Democode

Reduziererdefinition

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;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Eintragsdatei index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

Um eine Aktion durch den Store-Versand auszulösen, wird das in index.js abonnierte Ereignis ausgeführt.

Asynchrone Ausführung von Redux

Wenn Sie asynchrone Vorgänge in Redux ausführen müssen, müssen Sie das React-Thunk-Plug-In installieren

npm i react-thunk --save

Sie benötigen außerdem die applyMiddleware des Redux-Plugins

Schlüsselcode

Die Einstellung ist eigentlich sehr einfach. Übergeben Sie beim Erstellen des Stores einfach den Thunk.

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

Fügen Sie eine Schaltfläche hinzu, die einen asynchronen Vorgang in app.js auslöst. Im Reduzierer wurde eine asynchrone Methode definiert.

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Der asynchrone Aufruf der Methode gibt eine Methode mit zwei Parametern zurück. Beide Parameter sind Funktionen, der erste ist die Dispatch-Funktion und der zweite ist die getState-Funktion.
dispatch löst eine Aktion aus und getState ruft den Wert von state ab.

Code in app.js hinzufügen

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

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 zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

So verwenden Sie den React-Diff-Algorithmus

So verwalten Sie die Vue-Projekt-API-Schnittstelle

Das obige ist der detaillierte Inhalt vonReact+Redux von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!