React+Redux von Grund auf-js-Tutorial-php.cn

React+Redux von Grund auf

php中世界最好的语言

Freigeben： 2018-06-07 11:44:50

Original

1477 Leute haben es durchsucht

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

Nach dem Login kopieren

Popup-Konfiguration

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

npm run eject

Nach dem Login kopieren

Redux installieren

npm i redux --save

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!