Ein tiefer Eintauchen in Redux

Kernpunkte

• Redux vereinfacht das Staatsmanagement in modernen Anwendungen, indem es als vorhersehbarer Zustandsbehälter fungiert, was für die Aufrechterhaltung der Stabilität der Anwendung bei der Skalierung von entscheidender Bedeutung ist.
• TypeScript -Integration verbessert Redux, indem sie die Sicherheitstypen erzwingt, was eine Vorhersehbarkeitsebene hinzufügt und große Codebasen durch Vereinfachung von Refactoring beibehält.
• Der Reduzierer in Redux ist als reine Funktion konzipiert, um sicherzustellen, dass er keine Nebenwirkungen hat, wodurch die Testbarkeit und Zuverlässigkeit des Staatsmanagements verbessert wird.
• Verwenden Sie den Scherz, um Unit -Tests zu vereinfachen. Scherz funktioniert nahtlos mit TypeScript, um Redux -Aktionen und Reduzierer zu testen, um sicherzustellen, dass jede Komponente wie erwartet funktioniert.
• Dieser Artikel zeigt die tatsächliche Implementierung von Redux durch Erstellen einer Lohn- und Gehaltsabrechnungsmotor, wobei die Redux staatliche Übergänge verwaltet und sich mit Nebenwirkungen in realen Anwendungsszenarien befasst.

Eine staatliche moderne Anwendung aufbauen, ist eine komplexe Aufgabe. Wenn sich der Staat ändert, wird die Anwendung unvorhersehbar und schwer zu warten. Hier kommt Redux ins Spiel. Redux ist eine leichte Bibliothek für den Handling Status. Betrachten Sie es als Zustandsmaschine.

In diesem Artikel werde ich die staatlichen Container von Redux ausführlich untersuchen, indem ich eine Lohn- und Gehaltsabrechnungsmotor bauen kann. Die App speichert Gehaltsabrechnungen zusammen mit allen Extras wie Boni und Aktienoptionen. Ich werde reines JavaScript und TypeScript für die Typüberprüfung verwenden, um die Lösung einfach zu halten. Da Redux sehr einfach zu testen ist, werde ich auch Scherz verwenden, um die Anwendung zu überprüfen.

In diesem Tutorial nehme ich an, dass Sie ein gewisses Verständnis von JavaScript, Knoten und NPM haben.

Erstens können Sie diese Anwendung mit NPM initialisieren:

npm init

Wenn Sie nach Testbefehlen fragen, verwenden Sie weiterhin Scherz. Dies bedeutet, dass NPM T beginnt und alle Unit -Tests durchführen. Die Hauptdatei ist index.js, um sie einfach zu halten. Fühlen Sie sich frei, den Rest von NPM -Init -Fragen zu beantworten.

Ich werde TypeScript verwenden, um die Typüberprüfung durchzuführen und das Datenmodell zu bestimmen. Dies hilft zu konzipieren, was wir aufbauen wollen.

Beginnen Sie mit TypeScript:

npm i typescript --save-dev

Ich werde einige der Abhängigkeiten in den Entwicklungsworkflow in DevDependencies einsetzen. Dies zeigt deutlich, welche Abhängigkeiten für Entwickler vorbereitet sind und welche Abhängigkeiten in Produktionsumgebungen verwendet werden. Sobald TypeScript fertig ist, fügen Sie ein Startskript in package.json:

hinzu

"start": "tsc && node .bin/index.js"

Erstellen Sie eine Index.ts -Datei unter dem SRC -Ordner. Dies trennt die Quelldatei vom Rest des Projekts. Wenn Sie NPM -Start durchführen, wird die Lösung nicht ausgeführt. Dies liegt daran, dass Sie TypeScript konfigurieren müssen.

Erstellen Sie eine tsconfig.json -Datei mit der folgenden Konfiguration:

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

Ich hätte diese Konfiguration in das Argument der TSC -Befehlszeilenzeile einfügen können. Zum Beispiel ist TSC SRC/INDEX.TS -STRICT .... aber all dies in eine separate Datei zu legen ist viel klarer. Beachten Sie, dass das Startskript in package.json nur einen TSC -Befehl erfordert.

Hier sind einige angemessene Compiler -Optionen, die uns einen guten Ausgangspunkt bieten und was jede Option bedeutet:

• streng: Aktivieren Sie alle strengen Optionen für Typprüfungen, d. H. -Noimplicitany, -StrictnullChecks usw.
• lib: Eine Liste von Bibliotheksdateien, die in den Kompilierten enthalten sind.
• Outdir: Umleiten Sie die Ausgabe in dieses Verzeichnis.
• Sourcemap: Quellkarte zum Debuggen generieren.
• Dateien: Die dem Compiler zur Verfügung gestellte Eingabedatei.

Da ich Scherz für Unit -Tests verwenden werde, werde ich es weiter hinzufügen:

npm init

ts-jest-Abhängigkeit fügt die Typprüfung für das Testframework hinzu. Eine Sache zu beachten ist, eine Scherzkonfiguration in Paket hinzuzufügen.json:

npm i typescript --save-dev

Dies ermöglicht das Testframework, Typscript -Dateien aufzunehmen und zu wissen, wie sie konvertiert werden. Eine nette Funktion ist, dass Sie beim Ausführen von Unit -Tests ein Typ überprüfen können. Um sicherzustellen, dass dieses Projekt fertig ist, erstellen Sie einen __Tests__ -Ordner mit einer Index.test.ts -Datei. Dann wird ein sanitärer Scheck durchgeführt. Zum Beispiel:

"start": "tsc && node .bin/index.js"

Führen Sie nun NPM -Start aus und NPM T wird keine Fehler verursachen. Dies sagt uns, dass wir jetzt mit dem Bau von Lösungen beginnen können. Aber bevor wir dies tun, fügen wir dem Projekt Redux hinzu:

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

Diese Abhängigkeit wird in Produktionsumgebungen verwendet. Daher müssen es nicht mit-Save-dev einbezogen werden. Wenn Sie Ihr paket.json überprüfen, befindet sich es in Abhängigkeiten.

PayStop Motor im tatsächlichen Betrieb

Der Gehaltsabrechnungsmotor enthält Folgendes: Löhne, Erstattungen, Boni und Aktienoptionen. In Redux können Sie den Status nicht direkt aktualisieren. Stattdessen ist eine Aktion geplant, um die Speicherung neuer Änderungen zu informieren.

Dadurch bleibt der folgende Betriebstyp:

npm i jest ts-jest @types/jest @types/node --save-dev

Pay_Day -Betriebstyp kann verwendet werden, um Schecks am Zahltag auszugeben und Gehaltshistorie zu verfolgen. Diese Arten von Betrieb leiten den Rest des Designs, während wir die Lohn- und Gehaltsabrechnungsmotor perfektionieren. Sie erfassen Ereignisse im staatlichen Lebenszyklus, z. B. das Festlegen der Basislohnmenge. Diese Aktionsereignisse können jedem Inhalt beigefügt werden, unabhängig davon, ob es sich um ein Klickereignis oder eine Datenaktualisierung handelt. Redux -Betriebstypen sind abstrakt darüber, woher die Planung stammt. Der Statuscontainer kann auf dem Client und/oder auf dem Server ausgeführt werden.

TypeScript

Verwenden der Typtheorie werde ich das Datenmodell basierend auf den Zustandsdaten bestimmen. Für jeden Gehaltsabrechnungsvorgang wie den Betriebstyp und den optionalen Betrag. Der Betrag ist optional, da Pay_Day keine Mittel benötigt, um die Gehaltsabrechnung zu verarbeiten. Ich meine, es kann Kunden berechnen, aber es ignorieren es vorerst (vielleicht in der zweiten Ausgabe eingeführt).

geben Sie es beispielsweise in src/index.ts:

ein

"jest": {
  "preset": "ts-jest"
}

Für den Status der Lohn- und Gehaltsabrechnung benötigen wir ein Attribut für Grundgehalt, Bonus usw. Wir werden diesen Status auch verwenden, um die Gehaltshistorie aufrechtzuerhalten.

Diese TypsScript -Schnittstelle sollte:

tun

npm init

Beachten Sie für jede Eigenschaft, dass TypeScript einen Dickdarm verwendet, um den Typ anzugeben. Zum Beispiel: Nummer. Dies bestimmt den Typvertrag und verleiht dem Typ Checker Vorhersagbarkeit. Redux kann mithilfe eines Typsystems mit expliziten Typdeklarationen verbessert werden. Dies liegt daran, dass Redux -Staat -Container für vorhersehbares Verhalten gebaut sind.

Diese Idee ist nicht verrückt oder radikal. Lernen Redux Kapitel 1 (nur Mitglieder von SitePoint Premium) erklärt dies gut.

Wenn sich die Anwendung ändert, fügt die Typüberprüfung zusätzliche Vorhersehbarkeit hinzu. Wenn die Anwendungen erweitert werden, hilft die Typtheorie auch, die Rekonstruktion großer Codesegmente zu vereinfachen.

Verwenden der Typ Conceptualization Engine hilft nun dabei, die folgenden Betriebsfunktionen zu erstellen:

npm i typescript --save-dev

Das Gute ist, dass Sie, wenn Sie versuchen, ProcessBasepay ('ABC') zu machen, der Typ -Checker Sie warnt. Die Zerstörung von Typverträgen verringert die Vorhersehbarkeit von staatlichen Behältern. Ich verwende einen einzelnen Betriebsvertrag wie die Gehaltsabrechnung, um den Gehaltsabrechnungsprozessor vorhersehbarer zu machen. Beachten Sie, dass der Betrag im Betriebsobjekt über die ES6 -Attributabkürzung festgelegt wird. Der traditionellere Ansatz ist Betrag: Betrag, der ausführlicher ist. Pfeilfunktionen wie () = & Gt;

Reduzierer als reine Funktion

Die Reduzierfunktion benötigt einen Zustand und einen Betriebsparameter. Der Staat sollte einen Anfangszustand mit einem Standardwert haben. Können Sie sich also vorstellen, wie unser ursprünglicher Zustand aussehen könnte? Ich denke, es muss von vorne mit einer leeren Gehaltshistorie -Liste beginnen.

Beispiel:

"start": "tsc && node .bin/index.js"

Der Typ -Checker stellt sicher, dass dies die richtigen Werte sind, die zu diesem Objekt gehören. Erstellen Sie mit dem Ausgangszustand die Reduzierfunktion:

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

Redux Reducer verfügt über ein Muster, bei dem alle Betriebstypen durch Switch -Anweisungen verarbeitet werden. Bevor ich jedoch alle Switch -Fälle durchträgt, werde ich eine wiederverwendbare lokale Variable erstellen:

npm i jest ts-jest @types/jest @types/node --save-dev

Beachten Sie, dass Sie die lokalen Variablen ändern können, wenn Sie den globalen Zustand nicht ändern. Ich benutze den LET -Operator, um zu vermitteln, dass sich diese Variable in Zukunft ändern wird. Das Ändern des globalen Zustands (z. B. Zustands- oder Betriebsparameter) kann dazu führen, dass der Reduzierer unrein ist. Dieses funktionelle Paradigma ist entscheidend, da die Reduzierfunktion rein gehalten werden muss. JavaScript von Newbie bis Ninja Kapitel 11 (nur Mitglieder von SitePoint Premium).

Starten Sie die Schalteranweisung des Reduzierers, um den ersten Anwendungsfall zu verarbeiten:

"jest": {
  "preset": "ts-jest"
}

Ich benutze den ES6 -Restbetreiber, um die staatliche Eigenschaft unverändert zu halten. Zum Beispiel ... Zustand. Sie können jedes Attribut nach dem Restoperator in einem neuen Objekt überschreiben. Basepay kommt aus der Dekonstruktion, was dem Muster -Matching in anderen Sprachen ähnelt. Die Funktion computeretotalpay wird wie folgt festgelegt:

it('is true', () => {
  expect(true).toBe(true);
});

Bitte beachten Sie, dass Sie Störungen abziehen, da das Geld zum Kauf von Unternehmensaktien verwendet wird. Angenommen, Sie möchten sich mit Erstattung befassen:

npm init

Da der Betrag optional ist, stellen Sie sicher, dass er einen Standardwert hat, um den Fehler zu reduzieren. Dies ist der Vorteil von TypeScript, da der Typ Checker diese Falle erkennen und Sie warnt. Das Typsystem kennt bestimmte Fakten, sodass es angemessene Annahmen treffen kann. Angenommen, Sie möchten sich mit dem Bonus befassen:

npm i typescript --save-dev

Dieser Modus macht den Reduzierer lesbar, da er nur den Zustand unterhält. Sie erhalten den Betrieb des Vorgangs, berechnen das Gesamtgehalt und erstellen einen neuen Objekttext. Bei Aktienoptionen ist nichts anders:

"start": "tsc && node .bin/index.js"

Für die Bearbeitung der Gehaltsabrechnung am Zahltag müssen Boni und Erstattung gelöscht werden. Diese beiden Attribute werden in jeder Gehaltsabrechnung nicht im Staat gehalten. Und fügen Sie einen Eintrag in die Gehaltshistorie hinzu. Grundlegende Löhne und Aktienoptionen können im Staat aufbewahrt werden, da sie sich nicht häufig ändern. In diesem Sinne wird so Pay_day behandelt:

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

Verwenden Sie in einem Array wie Newpayhistory den Erweiterungsoperator, der das Antonym für Ruhe ist. Im Gegensatz zu Rest der Eigenschaft im Sammelobjekt erweitert es das Projekt. Zum Beispiel [... Payhistory]. Obwohl die beiden Operatoren ähnlich aussehen, sind sie nicht gleich. Sehen Sie sich sorgfältig an, da dies in Interviewfragen erscheinen kann.

Die Verwendung von Pop () für Payhistory ändert den Staat nicht. Warum? Weil Slice () ein brandneues Array zurückgibt. Arrays in JavaScript werden durch Bezugnahme kopiert. Das Zuweisen eines Arrays einer neuen Variablen ändert das zugrunde liegende Objekt nicht. Daher muss beim Umgang mit diesen Objekttypen darauf geachtet werden.

Da LastPayHistory wahrscheinlich undefiniert ist, verwende ich den Nullwert des armen Mannes, um ihn auf Null zu initialisieren. Bitte beachten Sie, dass (O && O.Property) || 0 -Modus zum Zusammenführen verwendet wird. Es kann eine elegantere Möglichkeit geben, dies in zukünftigen Versionen von JavaScript oder sogar TypeScript zu tun.

Jeder Redux -Reduzierer muss einen Standardzweig definieren. Um sicherzustellen, dass der Staat nicht undefiniert wird:

npm i jest ts-jest @types/jest @types/node --save-dev

Test Reduzierfunktion

Einer der vielen Vorteile des Schreibens reiner Funktionen ist, dass sie leicht zu testen sind. Unit -Tests sind ein Test, bei dem Sie vorhersehbares Verhalten erwarten müssen, und Sie können alle Tests im Rahmen des Builds automatisieren. In __Tests __/index.test.ts, stornieren Sie den virtuellen Test und importieren Sie alle interessanten Funktionen:

"jest": {
  "preset": "ts-jest"
}

Beachten Sie, dass alle Funktionen so exportieren können, sodass Sie sie importieren können. Starten Sie für das Grundgehalt den Lohn- und Gehaltsabrechnungsmotor -Reduzierer und testen Sie sie:

it('is true', () => {
  expect(true).toBe(true);
});

Redux legt den Anfangszustand auf undefinierter fest. Daher ist es immer eine gute Idee, Standardwerte in der Reduzierfunktion bereitzustellen. Wie wäre es mit der Erstattung der Erstattung?

npm i redux --save

Das Muster der Handhabung von Boni ist das gleiche wie folgt:

const BASE_PAY = 'BASE_PAY';
const REIMBURSEMENT = 'REIMBURSEMENT';
const BONUS = 'BONUS';
const STOCK_OPTIONS = 'STOCK_OPTIONS';
const PAY_DAY = 'PAY_DAY';

für Aktienoptionen:

interface PayrollAction {
  type: string;
  amount?: number;
}

Beachten Sie, dass TotalPay bei größerer Störungen mehr als TotalPay ist. Da dieses hypothetische Unternehmen ethisch ist, möchte es kein Geld von seinen Mitarbeitern nehmen. Wenn Sie diesen Test ausführen, beachten Sie bitte, dass TotalPay auf -10 eingestellt ist, da die Störungen abgezogen werden. Deshalb testen wir den Code! Fixieren wir den Ort, an dem das Gesamtgehalt berechnet wird:

npm init

Wenn das von den Mitarbeitern verdiente Geld nicht genug Geld hat, um Unternehmensaktien zu kaufen, überspringen Sie bitte den Abzug weiter. Stellen Sie außerdem sicher, dass die Störungen auf Null zurückgesetzt werden:

npm i typescript --save-dev

Diese Korrektur bestimmt, ob sie in NewStockoptions genug Geld haben. Damit ist der Unit -Test teil, der Code ist solide und aussagekräftig. Wir können positive Anwendungsfälle testen, in denen genügend Geld vorhanden ist, um Abzüge vorzunehmen:

"start": "tsc && node .bin/index.js"

für Zahltage, verwenden Sie mehrere Status, um zu testen, und stellen Sie sicher, dass eine einmalige Transaktion nicht bestehen:

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

Beachten Sie, wie ich OldState anpasse, um den Bonus zu überprüfen und die Erstattung auf Null zurückzusetzen.

Was ist mit dem Standardzweig im Reduzierer?

npm i jest ts-jest @types/jest @types/node --save-dev

Redux legt zu Beginn einen Betriebstyp wie init_action fest. Wir kümmern uns nur darum, ob unser Reduzierer einen Ausgangszustand hat.

Integrieren Sie alle Inhalte

Zu diesem Zeitpunkt können Sie sich fragen, ob Redux eher ein Designmuster ist. Wenn Sie antworten, dass es sich sowohl um ein Muster als auch eine leichte Bibliothek handelt, haben Sie Recht. In index.ts, redux importieren:

"jest": {
  "preset": "ts-jest"
}

Das nächste Code -Beispiel kann um diese Anweisung umwickelt werden. Dies ist eine Stopphap, sodass Unit -Tests nicht in Integrationstests eintreten:

it('is true', () => {
  expect(true).toBe(true);
});

Ich empfehle dies nicht in den tatsächlichen Projekten. Module können in separate Dateien platziert werden, um Komponenten zu isolieren. Dies erleichtert das Lesen und läuft keine Probleme. Unit -Tests profitieren auch von der Tatsache, dass Module unabhängig laufen.

Verwenden Sie den payrollenginereducer, um Redux -Speicher zu starten:

npm i redux --save

Jedes Speicher. Es wird dem Rückruf abgelehnt, wenn er über den Speicher geplant wird. Hier verwende ich Store.getState (), um den aktuellen Status an die Konsole auszugeben.

Angenommen, der Mitarbeiter verdiente 300, hatte 50 Erstattungen, 100 Boni und 15 für die Aktie des Unternehmens:

const BASE_PAY = 'BASE_PAY';
const REIMBURSEMENT = 'REIMBURSEMENT';
const BONUS = 'BONUS';
const STOCK_OPTIONS = 'STOCK_OPTIONS';
const PAY_DAY = 'PAY_DAY';

, um es mehr Spaß zu machen, weitere 50 Erstattung vorzunehmen und eine weitere Lohn- und Gehaltsabrechnung zu verarbeiten:

interface PayrollAction {
  type: string;
  amount?: number;
}

Führen Sie schließlich eine weitere Lohn- und Gehaltsabrechnung aus und bezeichnen Sie den Redux -Speicher ab:

interface PayStubState {
  basePay: number;
  reimbursement: number;
  bonus: number;
  stockOptions: number;
  totalPay: number;
  payHistory: Array<PayHistoryState>;
}

interface PayHistoryState {
  totalPay: number;
  totalCompensation: number;
}

Das Endergebnis ist wie folgt:

export const processBasePay = (amount: number): PayrollAction =>
  ({type: BASE_PAY, amount});
export const processReimbursement = (amount: number): PayrollAction =>
  ({type: REIMBURSEMENT, amount});
export const processBonus = (amount: number): PayrollAction =>
  ({type: BONUS, amount});
export const processStockOptions = (amount: number): PayrollAction =>
  ({type: STOCK_OPTIONS, amount});
export const processPayDay = (): PayrollAction =>
  ({type: PAY_DAY});

Wie gezeigt, behält Redux den Zustand, ändert den Zustand und benachrichtigt Abonnenten in einem ordentlichen kleinen Paket. Stellen Sie sich Redux als eine Zustandsmaschine vor, die die wahre Quelle der Zustandsdaten ist. All dies nimmt Coding Best Practices an, wie ein solid funktionales Paradigma.

Schlussfolgerung

Redux bietet eine einfache Lösung für komplexe Zustandsmanagementprobleme. Es stützt sich auf das funktionale Paradigma, um die Unvorhersehbarkeit zu verringern. Da Reduzierer eine reine Funktion ist, ist das Testen von Einheiten sehr einfach. Ich habe mich entschlossen, einen Scherz zu verwenden, aber jeder Test -Framework, der grundlegende Behauptungen unterstützt, funktioniert.

TypeScript verwendet Typentheorie, um eine zusätzliche Schutzschicht hinzuzufügen. Kombinieren Sie die Typ -Überprüfung mit funktionaler Programmierung und Sie erhalten einen robusten Code, der fast nie unterbrochen wird. Am wichtigsten ist, dass TypeScript dem Arbeiten nicht im Wege des Wertes im Wege steht. Wenn Sie bemerken, gibt es nach dem Geben des Typvertrags fast keine zusätzliche Codierung. Der Typ Checker macht den Rest. Wie jedes gute Tool automatisiert TypeScript -Codierungsdisziplin und bleibt unsichtbar. Typscript bellen laut, aber es beißt leicht.

Wenn Sie dieses Projekt ausprobieren möchten (ich hoffe, Sie tun dies), finden Sie den Quellcode für diesen Artikel auf GitHub.

Das obige ist der detaillierte Inhalt vonEin tiefer Eintauchen in Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!