Points de base

• Redux simplifie la gestion de l'état dans les applications modernes en agissant comme un conteneur d'état prévisible, qui est essentiel pour maintenir la stabilité de l'application lorsqu'elle est mise à l'échelle.
• L'intégration de typeScript améliore Redux en for?ant la sécurité de type, ce qui ajoute une couche de prévisibilité et aide à maintenir de grandes bases de code en simplifiant la refactorisation.
• Le réducteur de Redux est con?u comme une fonction pure pour s'assurer qu'il n'a pas d'effets secondaires, améliorant ainsi la testabilité et la fiabilité de la gestion de l'état.
• Utiliser la plaisanterie pour simplifier les tests unitaires, la plaisanterie fonctionne de manière transparente avec TypeScript pour tester les actions et les réducteurs Redux, garantissant que chaque composant fonctionne comme prévu.
• Cet article démontre la mise en ?uvre réelle de Redux en créant un moteur de paie, montrant comment Redux gère les transitions d'état et traite des effets secondaires dans des scénarios d'application réels.

Construire une application moderne avec état est une tache complexe. à mesure que l'état change, l'application devient imprévisible et difficile à maintenir. C'est là que Redux entre en jeu. Redux est une bibliothèque légère pour gérer l'état. Considérez-le comme une machine d'état.

Dans cet article, j'explorerai en profondeur les conteneurs d'état de Redux en créant un moteur de traitement de la paie. L'application stockera la masse salariale avec tous les extras tels que les bonus et les options d'achat d'actions. J'utiliserai Pure JavaScript et TypeScript pour la vérification de type pour garder la solution simple. étant donné que Redux est très facile à tester, j'utiliserai également Jest pour vérifier l'application.

Dans ce tutoriel, je suppose que vous avez une certaine compréhension de JavaScript, de n?ud et de NPM.

Tout d'abord, vous pouvez initialiser cette application avec NPM:

npm init

Lorsque vous demandez des commandes de test, continuez à utiliser la plaisanterie. Cela signifie que NPM T commencera à plaisanter et exécutera tous les tests unitaires. Le fichier principal sera index.js pour rester simple. N'hésitez pas à répondre au reste des questions Init NPM.

J'utiliserai TypeScript pour effectuer la vérification de type et déterminer le modèle de données. Cela aide à conceptualiser ce que nous essayons de construire.

pour commencer avec TypeScript:

npm i typescript --save-dev

Je vais mettre certaines des dépendances dans le flux de travail de développement dans DevDependces. Cela montre clairement quelles dépendances sont préparées pour les développeurs et quelles dépendances seront utilisées dans les environnements de production. Une fois que TypeScript est prêt, ajoutez un script de démarrage dans package.json:

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

Créez un fichier index.ts dans le dossier SRC. Cela sépare le fichier source du reste du projet. Si vous commencez NPM, la solution ne sera pas exécutée. En effet, vous devez configurer TypeScript.

Créez un fichier tsconfig.json avec la configuration suivante:

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

J'aurais pu mettre cette configuration dans l'argument de la ligne de commande TSC. Par exemple, TSC SRC / INDEX.TS --TRICT .... Mais mettre tout cela dans un fichier séparé est beaucoup plus clair. Notez que le script de démarrage dans package.json ne nécessite qu'une commande TSC.

Voici quelques options de compilateur raisonnables qui nous donneront un bon point de départ et ce que chaque option signifie:

• Strict: Activez toutes les options de vérification de type strict, c'est-à-dire - noimplicitany, --strictnullchecks, etc.
• lib: une liste des fichiers de bibliothèque inclus dans le compilé.
• outdir: redirigez la sortie vers ce répertoire.
• SOURCEMAP: générer un fichier de carte source pour le débogage.
• Fichiers: le fichier d'entrée fourni au compilateur.

Parce que j'utiliserai la plaisanterie pour les tests unitaires, je continuerai à l'ajouter:

npm init

La dépendance TS-Jest ajoute la vérification du type pour le cadre de test. Une chose à noter est d'ajouter une configuration de plaisanterie dans package.json:

npm i typescript --save-dev

Cela permet au Framework de test de récupérer les fichiers TypeScript et de savoir comment les convertir. Une belle fonctionnalité est que vous pouvez faire la vérification de type lors des tests unitaires. Pour vous assurer que ce projet est prêt, créez un dossier __tests__ contenant un fichier index.test.ts. Ensuite, un contr?le d'assainissement est effectué. Par exemple:

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

exécuter désormais NPM Start et NPM T ne provoquera aucune erreur. Cela nous dit que nous pouvons maintenant commencer à construire des solutions. Mais avant de faire cela, ajoutons Redux au projet:

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

Cette dépendance sera utilisée dans les environnements de production. Par conséquent, il n'est pas nécessaire de l'inclure avec --Save-DEV. Si vous vérifiez votre package.json, ce sera en dépendances.

Moteur de paie en fonctionnement réel

Le moteur de paie contiendra les éléments suivants: salaires, remboursements, bonus et options d'achat d'actions. Dans Redux, vous ne pouvez pas mettre à jour le statut directement. Au lieu de cela, une action est prévue pour informer le stockage de toute nouvelle modification.

donc cela laisse le type d'opération suivant:

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

Le type d'exploitation PAY_DAY peut être utilisé pour émettre des chèques le jour de paie et suivre l'historique des salaires. Ces types d'opérations guident le reste de la conception alors que nous perfectionnons le moteur de paie. Ils capturent des événements dans le cycle de vie de l'état, comme la fixation du montant du salaire de base. Ces événements d'action peuvent être joints à n'importe quel contenu, qu'il s'agisse d'un événement de clic ou d'une mise à jour de données. Les types d'opération Redux sont abstraits d'où provient la planification. Le conteneur d'état peut s'exécuter sur le client et / ou sur le serveur.

TypeScript

En utilisant la théorie des types, je déterminerai le modèle de données basé sur les données de l'état. Pour chaque opération de paie, comme le type d'opération et le montant facultatif. Le montant est facultatif car Pay_day ne nécessite pas de fonds pour traiter la paie. Je veux dire, il peut facturer aux clients, mais l'ignorer pour l'instant (peut-être introduit dans la deuxième édition).

Par exemple, mettez-le dans src / index.ts:

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

Pour l'état de la paie, nous avons besoin d'un attribut pour le salaire de base, le bonus, etc. Nous utiliserons également ce statut pour maintenir l'historique des salaires.

Cette interface TypeScript doit faire:

npm init

Pour chaque propriété, notez que TypeScript utilise un c?lon pour spécifier le type. Par exemple ,: numéro. Cela détermine le contrat de type et ajoute une prévisibilité au vérificateur de type. Redux peut être amélioré à l'aide d'un système de type avec des déclarations de type explicite. En effet, les conteneurs d'état Redux sont con?us pour un comportement prévisible.

Cette idée n'est ni folle ni radicale. Apprentissage Redux Chapitre 1 (Les membres de SitePoint Premium uniquement) explique bien cela.

à mesure que l'application change, la vérification du type ajoute une prévisibilité supplémentaire. à mesure que les applications se développent, la théorie des types aide également à simplifier la reconstruction de grands segments de code.

L'utilisation du moteur de conceptualisation de type aide désormais à créer les fonctions de fonctionnement suivantes:

npm i typescript --save-dev

La bonne chose est que si vous essayez de faire ProcessBasePay ('ABC'), le type Checker vous avertira. La destruction des contrats de type réduit la prévisibilité des conteneurs d'état. J'utilise un contrat d'exploitation unique comme la paie pour rendre le processeur de paie plus prévisible. Notez que le montant est défini dans l'objet Operation via l'abréviation de l'attribut ES6. L'approche la plus traditionnelle est le montant: le montant, qui est plus verbeux. Les fonctions Arrow, telles que () = & gt; ({}) sont un moyen concis d'écrire des fonctions qui renvoient les littéraux d'objet.

réducteur comme fonction pure

La fonction de réducteur nécessite un état et un paramètre de fonctionnement. L'état doit avoir un état initial avec une valeur par défaut. Alors, pouvez-vous imaginer à quoi pourrait ressembler notre état initial? Je pense que cela doit commencer à zéro avec une liste d'historique de salaire vide.

Exemple:

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

Le vérificateur de type s'assure que ce sont les valeurs correctes appartenant à cet objet. Avec l'état initial, commencez à créer la fonction de réducteur:

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

Le réducteur Redux a un modèle dans lequel tous les types de fonctionnement sont traités par des instructions de commutation. Mais avant d'itérer dans tous les cas de commutateur, je vais créer une variable locale réutilisable:

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

Notez que si vous ne modifiez pas l'état global, vous pouvez modifier les variables locales. J'utilise l'opérateur LET pour indiquer que cette variable changera à l'avenir. La modification de l'état mondial (comme les paramètres d'état ou opérationnels) peut faire impurer le réducteur. Ce paradigme fonctionnel est crucial car la fonction de réducteur doit être maintenue pure. JavaScript du débutant à Ninja Chapitre 11 (membres de la prime SitePoint uniquement).

Démarrez l'instruction Switch of Reducer pour gérer le premier cas d'utilisation:

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

J'utilise l'opérateur ES6 REST pour garder la propriété d'état inchangée. Par exemple, ... état. Vous pouvez écraser n'importe quel attribut après l'opérateur de repos dans un nouvel objet. Basepay vient de la déconstruction, ce qui ressemble beaucoup à la correspondance de motifs dans d'autres langues. La fonction comprotetotalpay est définie comme suit:

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

Veuillez noter que vous déduquerez les stocks car l'argent sera utilisé pour acheter des actions de l'entreprise. Supposons que vous souhaitiez faire face au remboursement:

npm init

étant donné que le montant est facultatif, assurez-vous qu'il a une valeur par défaut pour réduire l'échec. C'est l'avantage de TypeScript, car le type vérificateur repére ce piège et vous avertira. Le système de type conna?t certains faits, il peut donc faire des hypothèses raisonnables. Supposons que vous souhaitiez faire face au bonus:

npm i typescript --save-dev

Ce mode rend le réducteur lisible car il ne conserve que l'état. Vous obtenez le montant de l'opération, calculez le salaire total et créez un nouveau texte d'objet. Rien n'est différent lorsqu'il s'agit d'options d'achat d'actions:

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

Pour le traitement de la paie le jour de la paie, il nécessite l'effacement des bonus et le remboursement. Ces deux attributs ne sont pas conservés dans l'état dans chaque masse salariale. Et, ajoutez une entrée à l'historique des salaires. Les salaires de base et les options d'achat d'actions peuvent être conservés dans l'état car ils ne changent pas fréquemment. Dans cet esprit, c'est ainsi que Pay_day est géré:

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

Dans un tableau comme NewPayHistory, utilisez l'opérateur d'extension, qui est l'antonym pour le repos. Contrairement au reste de la propriété dans l'objet de collecte, il élargit le projet. Par exemple, [... Payhistory]. Bien que les deux opérateurs ressemblent, ils ne sont pas les mêmes. Regardez attentivement, car cela peut appara?tre dans les questions d'entrevue.

Utilisation de POP () pour Payhistory ne changera pas l'état. Pourquoi? Parce que Slice () renvoie un tout nouveau tableau. Les tableaux en JavaScript sont copiés par référence. L'attribution d'un tableau à une nouvelle variable ne modifie pas l'objet sous-jacent. Par conséquent, il faut prendre soin de traiter ces types d'objets.

Parce que LastPayHistory n'est probablement pas défini, j'utilise la fusion de la valeur nulle du pauvre pour l'initialiser à zéro. Veuillez noter que (O && o.property) || 0 Le mode est utilisé pour la fusion. Il peut y avoir un moyen plus élégant de le faire dans les futures versions de JavaScript ou même de type dactylographié.

Chaque réducteur Redux doit définir une branche par défaut. Pour s'assurer que l'état ne devient pas indéfini:

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

Fonction de réducteur de test

L'un des nombreux avantages de l'écriture de fonctions pures est qu'elles sont faciles à tester. Les tests unitaires sont un test où vous devez vous attendre à un comportement prévisible, et vous pouvez automatiser tous les tests dans le cadre de la construction. Dans __tests __ / index.test.ts, annulez le test virtuel et importez toutes les fonctions d'intérêt:

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

Notez que toutes les fonctions sont définies pour exporter, vous pouvez donc les importer. Pour le salaire de base, démarrez le réducteur du moteur de paie et testez-le:

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

redux définit l'état initial à un non-défini. Par conséquent, c'est toujours une bonne idée de fournir des valeurs par défaut dans la fonction réductrice. Que diriez-vous de gérer le remboursement?

npm i redux --save

Le modèle de bonus de manipulation est le même que celui-ci:

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

pour les options d'achat d'actions:

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

Notez que lorsque les stocks sont supérieurs à TotalPay, TotalPay doit rester inchangé. étant donné que cette entreprise hypothétique est éthique, elle ne veut pas prendre d'argent à ses employés. Si vous exécutez ce test, veuillez noter que TotalPay est réglé sur -10, car les stocks seront déduits. C'est pourquoi nous testons le code! Corrigeons l'endroit où le salaire total est calculé:

npm init

Si l'argent gagné par les employés n'a pas assez d'argent pour acheter des actions de l'entreprise, veuillez continuer à ignorer la déduction. Assurez-vous également qu'il réinitialise les stocks à zéro:

npm i typescript --save-dev

Ce correctif détermine s'ils ont suffisamment d'argent dans NewStockoptions. Avec cela, le test unitaire passe, le code est sain et significatif. Nous pouvons tester des cas d'utilisation positifs où il y a suffisamment d'argent pour effectuer des déductions:

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

Pour les jours de paie, utilisez plusieurs statuts pour tester et assurez-vous qu'une transaction unique ne persiste pas:

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

Notez comment j'ajuste OldState pour vérifier le bonus et réinitialiser le remboursement à zéro.

Qu'en est-il de la branche par défaut du réducteur?

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

redux définit un type d'opération comme init_action au début. Nous ne nous soucions que si notre réducteur a un ensemble d'état initial.

Intégrer tous les contenus

à ce stade, vous pouvez commencer à vous demander si Redux est plus un modèle de conception. Si vous répondez qu'il s'agit à la fois d'un modèle et d'une bibliothèque légère, vous avez raison. Dans index.ts, importer redux:

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

L'exemple de code suivant peut être enveloppé autour de cette instruction IF. Il s'agit d'un stopgap pour que les tests unitaires ne fuisent pas dans les tests d'intégration:

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

Je ne recommande pas de le faire dans des projets réels. Les modules peuvent être placés dans des fichiers séparés pour isoler les composants. Cela facilite la lecture et ne fuit pas de problèmes. Les tests unitaires bénéficient également du fait que les modules fonctionnent indépendamment.

Utilisez PayrollenginerDeducer pour démarrer le stockage redux:

npm i redux --save

Chaque magasin.Subscribe () renvoie une fonction ultérieure de désabscription () qui peut être utilisée pour le nettoyage. Il se désabonne au rappel lorsqu'il est planifié via le stockage. Ici, j'utilise store.getState () pour sortir l'état actuel de la console.

Supposons que l'employé soit gagné 300, avait 50 remboursements, 100 bonus et 15 pour les actions de l'entreprise:

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

pour le rendre plus amusant, faire 50 autres remboursements et traiter une autre masse salariale:

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

Enfin, exécutez une autre masse salariale et désinscrivez-vous à Redux Storage:

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

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

Le résultat final est le suivant:

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

Comme indiqué, Redux maintient l'état, modifie l'état et informe les abonnés dans un petit paquet soigné. Considérez Redux comme une machine d'état, qui est la véritable source des données d'état. Tout cela adopte les meilleures pratiques de codage, comme un paradigme fonctionnel solide.

Conclusion

redux fournit une solution simple aux problèmes de gestion des états complexes. Il repose sur le paradigme fonctionnel pour réduire l'imprévisibilité. Parce que le réducteur est une fonction pure, les tests unitaires sont très faciles. J'ai décidé d'utiliser JEST, mais tout cadre de test qui prend en charge les affirmations de base fonctionnera.

TypeScript utilise la théorie du type pour ajouter une couche de protection supplémentaire. Combinez la vérification des types avec la programmation fonctionnelle et vous obtenez un code robuste qui n'est presque jamais interrompu. Plus important encore, TypeScript ne gêne pas le travail tout en ajoutant de la valeur. Si vous remarquez, une fois le contrat de type en place, il n'y a presque pas de codage supplémentaire. Le vérificateur de type fait le reste. Comme tout bon outil, TypeScript automatise la discipline de codage tout en restant invisible. Broking dactylographié bruyamment, mais il mord légèrement.

Si vous souhaitez essayer ce projet (j'espère que vous le faites), vous pouvez trouver le code source de cet article sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!