Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung

Prämisse

In komplexen Szenarien müssen große Datenmengen verwendet und zwischen mehreren unterschiedlichen Seiten hin- und hergeschoben werden. Die Methode der direkten Datenkommunikation der Miniprogrammseite ist jedoch sehr einfach. Normalerweise müssen Sie ein globales Objekt verwalten, um gemeinsame Daten zu speichern. Allerdings wird die bloße Pflege einer gemeinsam genutzten Datenentität zu umfangreich, da die Geschäftslogik immer komplexer wird und Datenänderungen oft nicht mehr gut nachverfolgt werden können. Darüber hinaus gibt es keine gute Synchronisierungsmethode zwischen der Änderung von Daten in der öffentlichen Datenentität und der Benutzeroberfläche der Seite. Häufig müssen sowohl auf der Seite als auch in der entsprechenden Datenentität dieselben Daten verwaltet werden, was sehr unpraktisch ist.

Taro wurde bereits früher verwendet, um WeChat-Applets mit der Struktur von React+Redux zu entwickeln. Durch die Verwendung von Redux können die oben genannten Probleme insgesamt gelöst werden. Aber Taro selbst birgt auch einige inakzeptable potenzielle Probleme. Im Einklang mit dem Grundsatz, niemals neu gepackte Bibliotheken von Drittanbietern zu verwenden, wenn native Bibliotheken verwendet werden können. Ich wollte schon immer versuchen, Redux in die Entwicklung nativer WeChat-Applets zu integrieren.

Zu lösende Probleme

1. Zugriff auf die Redux-Bibliothek
2. Bindung von Seiten-UI und Redux-Daten

Einführung der Redux-Bibliothek

1. Um Redux zu installieren, können Sie npm oder yarn verwenden.
Die spezifische offizielle chinesische Redux-Website lautet wie folgt: https://www.reduxjs.cn/introduction/getting-started/
2. Das WeChat-Applet führt externe NPM-Pakete ein.
Verwenden Sie WeChat Mini Program IDEA, erstellen Sie npm in Tools und generieren Sie miniprogram_npm.

3. Lösung für den Fehler ReferenceError: Prozess ist in der Redux-Bibliothek nicht definiert.

Da das WeChat-Applet das NPM-Tool zum Erstellen von Nodeprocess-Umgebungsvariablen verwendet, werden diese während der Erstellung nicht eingeführt. Redux hat jedoch entsprechende Optimierungen für verschiedene Umgebungen vorgenommen. Infolgedessen fehlen dem erstellten Paket Prozessvariablen. Die bequemste Lösung besteht darin, den erforderlichen Prozess selbst in das erstellte Paket einzufügen.

Dadurch lässt sich grundsätzlich das Problem fehlender Prozessparameter lösen, das bei allen Drittanbieterbibliotheken auftritt. Wenn Sie es jedes Mal manuell ändern müssen, wenn Sie das Build-npm-Tool ausführen. Es wäre problematisch, wenn mehrere Bibliotheken von Drittanbietern manuell geändert werden müssten. Daher ist es erforderlich, Skripte und Tools wie AST-Bäume zu verwenden, um dynamische Änderungen durchzuführen und Arbeitskosten zu sparen (dies wird später vorgestellt).

Zusammenfassend ist die Einführung von Redux abgeschlossen.

Fügen Sie Ihrem Projekt Redux hinzu

1. Shoperstellung

Verwenden Sie combineReducers, um verschiedene Entitäten zusammenzuführen, verwenden Sie createStore, um die Store-Entität zu erstellen und zu exportieren. Aus Gründen der Dateneinheitlichkeit besteht das Prinzip von Redux darin, dass ein Projekt nur einen Store initialisiert, sodass alle nachfolgenden Vorgänge im aktuell generierten Store ausgeführt werden.

Datenentitäten zusammenführen:

const { combineReducers } = erfordern('redux');
const testItem = require('./testItem/index');
const testItem2 = erfordern('./testItem2/index');
const Benutzer = erforderlich('./Benutzer/index');

const Reducer = kombinierenReducers({
 testItem: testItem.testItem,
 testItem2,
 Benutzer
});

modul.exporte = {
 Reduzierstück
}

Exportieren Sie den Shop:

const { createStore, applyMiddleware } = erfordern('redux');
const { Reduzierer } = erfordern('./Reduzierer');
const { logger } = erfordern('redux-logger');

const store = erstelleStore(
 Reduzierstück,
 applyMiddleware(logger)
)

modul.exporte = {
 speichern
}

2. Globaler Wartungsspeicher

Die Verwendung hier unterscheidet sich von der in React. Das WeChat-Applet verfügt nicht über eine entsprechende Steuerung zur globalen Verwaltung des Stores. Daher besteht mein Ansatz darin, ihn direkt in den globalData von app.js zu verwalten, sodass jede Seite den Store direkt abrufen kann.
app.js:

const { store } = erfordern('./redux/index');

//app.js
App({
 globalData: {
  $store: speichern,
  getState: ()=> store.getState(),
 }
})

Simulieren Sie die Verbindungsmethode

In React wird die Connect-Methode durch höherwertige Komponenten implementiert, diese Methode ist jedoch nicht auf WeChat-Applets anwendbar. Glücklicherweise bietet Redux eine Abonnementmethode zum Überwachen von Datenänderungen im Store. Also der ursprüngliche Entwurf:
1. Wenn eine Seite aufgerufen oder angezeigt wird, fügen Sie einen Listener hinzu und zerstören Sie den Listener, wenn die Seite ausgeblendet oder zerstört wird
2. Simulieren Sie nach dem Hinzufügen des Listeners die MapState-Methode und fügen Sie die entsprechenden Daten in Redux in die Daten der Seite ein
3. Wenn Sie Datenänderungen in Redux überwachen, aktualisieren Sie die Seitendaten, um die Seiten-Benutzeroberfläche zu aktualisieren
4. Simulieren Sie die mapDispatch-Methode, um der Seite eine Methode zum Ändern von Store-Daten bereitzustellen

SeiteW.js:

const { store } = erfordern('../redux/index');

const initPage = (params = {}, connect = []) => {
 Konstante { 
  beim Laden = ()=>{},
  beim Anzeigen = ()=>{},
  beim Ausblenden = ()=>{},
  beim Entladen = ()=>{},
  Daten = {}
  } = Parameter;

 const neueSeite = {
  ...Parameter,
  // ---
  Beim Laden(...p) {
   beim Laden.binden(dies)(...p);
  },
  BeiAnzeige(...p) {
   onShow.bind(dies)(...p);
  },
  Beim Ausblenden(...p) {
   onHide.bind(dies)(...p);
  },
  BeimEntladen(...p) {
   beimEntladen.binden(dies)(...p);
  },
  // ---
  // Listener löschen clearStoreSubscribe() {
   wenn (this.storeSubscribe) {
    this.storeSubscribe();
    this.storeSubscribe = nicht definiert;
   }
  },
  // Daten in Redux abrufen
  getNewData() {
   const neueItems = {};

   const state = this.$store.getState();

   if (verbinden) {
    wenn ( Array.isArray(connect) ) {
     connect.forEach((Schlüssel) => {
      konstanter Wert = Status[Schlüssel];
      wenn (Wert und diese.Daten[Schlüssel] !== Wert) {
       newItems[Schlüssel] = Wert
      }
     })
    } sonst wenn (Typ der Verbindung === 'Funktion') {
     const Liste = Verbinden(Status) || {};
     Object.keys(Liste).forEach((Schlüssel) => {
      konstanter Wert = Liste[Schlüssel];
      wenn (Wert und diese.Daten[Schlüssel] !== Wert) {
       newItems[Schlüssel] = Wert
      }
     })
    }
   }

   neue Elemente zurückgeben;
  },
  // Auf Redux-Änderungen warten handleReduxChange() {
   dies.setData({
    ...dies.getNewData(),
   });
  },
  // -----------------
  Daten: {
   ...Daten
  },
  beim Laden(...p) {
   const app = getApp()
   dies.$store = app.globalData.$store;
   dies.setData({
    ...dies.getNewData(),
   });

   dies.OnLoad(...p);

   dies._isOnLoad = wahr;
  },
  beim Anzeigen (...p) {
   wenn (!this.storeSubscribe) {
    dies.storeSubscribe = dies.$store.subscribe(()=>this.handleReduxChange());
   }

   wenn (!this._isOnLoad) {
    dies.setData({
     ...dies.getNewData(),
    });
   }


   dies.OnShow(...p);

   this._isOnLoad = falsch;
  },
  beimAusblenden(...p) {
   dies.OnHide(...p);

   dies.clearStoreSubscribe();
  },
  beimEntladen(...p) {
   dies.OnUnload(...p);

   dies.clearStoreSubscribe();
  },
  // ---
  Versand(...p) {
   wenn (dieser.$store) {
    gib dies zurück.$store.dispatch(...p);
   }
  }
 }

 gib neue Seite zurück;
}

const PageW = (params = {}, mapState = [], mapDispatch = ()=>{}) => {
 const page = initPage({...params}, mapState);
 const dispatchList = mapDispatch(store) || {};

 Seite.mapDispatch = {
  ...Versandliste
 };

 Seite (Seite) zurückgeben;
}

module.exports = SeiteW;

Die wichtigsten Überlegungen und Mängel in PageW sind wie folgt:
1. Um den ursprünglichen Lebenszyklusnamen des WeChat-Applets unverändert zu lassen, wird der Lebenszyklus der eingehenden Seite im Voraus entführt und dann nach Abschluss des entsprechenden Lebenszyklus mithilfe von Bind erneut ausgelöst.
2. Da Redux Daten aktualisiert, wird ein neues Datenobjekt generiert. Wenn also Datenänderungen erkannt werden, werden die neuen und die alten Daten verglichen. Bei jedem Aufruf von setData werden nur die Daten eingefügt, die sich tatsächlich geändert haben.
3. Die Daten auf der Seite verwalten nicht nur die von der Standardseite erstellten Daten, sondern fügen auch die Daten nach der Redux-Verbindung hinzu. Derzeit gibt es jedoch keine sichere Unterscheidung zwischen den Namen dieser beiden Daten, sodass sich der Datenname in den nativen Daten der Seite von den von Connect eingefügten Daten unterscheiden muss.

Testseite:

Importierte zwei Datenelemente, testItem und testItem2, und importierte eine Methode namens add2

const PageW = erfordern('../../pageW/index');
const { ActionsFun } = erfordern ('../../redux/testItem/actions');

const Seite = {
 Daten: {
  wwj: 4
 },
 beim Laden() {
  console.log('sub beim Laden');
 },
 beiAnzeigen() {

 },
 zuTest() {
  console.log('toTest');
  wx.navigateTo({
   URL: '/Seiten/Test/Index'
  })
 },
 button1() {
  Konsole.log('Schaltfläche1');
  dies.mapDispatch.add2();
 },
 button2() {
  const { wwj } = diese.Daten;
  dies.setData({
   wwj: wwj + 2
  });
 },
}

const mapState = [ 'testItem', 'testItem2' ];

const mapDispatch = ({dispatch}) => {
 zurückkehren {
  add2: (Parameter) => Dispatch(ActionsFun.add(Parameter))
 }
}

PageW(Seite, Kartenstatus, Kartenversand);

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von Redux bei der Entwicklung nativer WeChat-Applets. Weitere relevante Inhalte zur Verwendung von Redux in Applets finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!