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!