Analyse der Redux-Bindung des WeChat-Applets

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung der Redux-Bindungsinstanz des WeChat-Applets vorgestellt. Freunde, die sie benötigen, können auf

Die detaillierte Erklärung der Redux-Bindungsinstanz des WeChat-Applet

Installieren

Klonen oder laden Sie die Codebibliothek lokal herunter:

git clone https://github.com/charleyw/wechat-weapp-redux

Dist/wechat-weapp ändern – Kopieren Sie die Datei redux.js (oder kopieren Sie minify) beispielsweise direkt in das Miniprogrammprojekt (vorausgesetzt, wir installieren unten alle Pakete von Drittanbietern im libs-Verzeichnis):

cd wechat-weapp-redux
 cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

Der obige Befehl kopiert das Paket in das libs-Verzeichnis des Miniprogramms

Verwenden Sie

1. Binden Sie den Redux Store an die App.

const store = createStore(reducer) // redux store
 
 const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
 const {Provider} = WeAppRedux;

Provider wird verwendet, um den Redux Store an die App zu binden.

App(Provider(store)({
 onLaunch: function () {
  console.log("onLaunch")
 }
}))

Die Implementierung des Anbieters besteht einfach darin, den Store zur globalen Objekt-App hinzuzufügen, was bequem mit getApp auf der Seite

herausgenommen werden kann

oben Dieser Code entspricht:

App({
 onLaunch: function() {
   console.log( "onLaunch" )
  },
  store: store
})

2. Verwenden Sie connect in der Definition der Seite, um den Redux-Store an die Seite zu binden .

const pageConfig = {
  data: {
  },
  ...
 }

Definition der Seite

const mapStateToData = state => ({
  todos: state.todos,
  visibilityFilter: state.visibilityFilter
 })

Definiert, welchen Bundesstaaten zugeordnet werden soll Seite

const mapDispatchToPage = dispatch => ({
  setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
  toggleTodo: id => dispatch(toggleTodo(id)),
  addTodo: text => dispatch(addTodo(text)),
 })

Definieren Sie, welche Methoden der Seite zugeordnet werden sollen

const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)

Verwenden Sie connect, um eine Verbindung herzustellen Die obige Definition wird zu pageConfig hinzugefügt.

Page(nextPageConfig);

Mini-Programmseite registrieren

3. Anweisungen

Nach Abschluss der beiden oben genannten Schritte können Sie in this.data auf die Daten zugreifen, die Sie in „mapStateToData“ definiert haben.

Die durch „mapDispatchToPage“ definierte Aktion wird diesem Objekt zugeordnet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in UI- und Containerkomponenten in WeChat-Miniprogrammen

Über die MD5-Methode von WeChat Analyse von Miniprogrammen

Einführung in die Verwendung der neuen Drag-Komponente „movable-view“ im WeChat-Applet

Das obige ist der detaillierte Inhalt vonAnalyse der Redux-Bindung des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!