Comment j'ai remplacé des lignes de code par Just in Redux Store – sans casser l'application !

J'ai observé un schéma commun parmi les développeurs travaillant avec les magasins Redux : lorsqu'ils sont confrontés à des exigences nouvelles, mais légèrement différentes, ils créent souvent de nouvelles fonctionnalités et réécrivent le code passe-partout générique, y compris les réducteurs, les réflexions, les actions et les middlewares. Cela peut conduire à des répétitions importantes dans la base de code.

Nous ne pouvons pas entièrement blâmer les développeurs pour cela, car la normalisation et les meilleures pratiques d'équipe sont généralement le fait des chefs d'équipe....

Cependant, lorsque les API ou les microservices sont standardisés (où les points de terminaison tels que la suppression, la création, le placement et la récupération suivent une structure prévisible), il est possible de créer des fonctions d'ordre supérieur qui peuvent générer dynamiquement des réducteurs et des actions Redux. Cela réduit la redondance et encourage une architecture plus évolutive. Voici un exemple de la façon dont cela peut être mis en œuvre :

https://gist.github.com/ARAldhafeeri/1ad10710bee110b9a88013984272fbbd

c'est 200 lignes de code, avec un exemple d'utilisation, voici ce qu'il fait :

1. Création dynamique de tranches Redux : La fonction createEntitySlice génère une tranche Redux pour une entité (comme des réservations ou des utilisateurs), permettant aux développeurs de créer, lire, mettre à jour et supprimer facilement des données pour toute entité avec un code standard minimal.
2. Paramètres personnalisables : La fonction accepte des paramètres personnalisables, tels que le nom d'entité, les points de terminaison, les extraReducers, les extraThunks et les extraActions, permettant une flexibilité pour différentes entités et exigences spécifiques.
3. Base CRUD Thunks : Il fournit des thunks asynchrones de base pour les opérations courantes telles que la récupération, la création, la mise à jour, la suppression et la recherche, qui interagissent avec une API basée sur les points de terminaison fournis. Ces personnes gèrent les appels API nécessaires et gèrent les erreurs.
4. Réducteurs pour la gestion de l'état : la tranche comprend des réducteurs pour gérer l'état de chargement, stocker les données récupérées, gérer les erreurs et effectuer des actions telles que la recherche et la réinitialisation de l'état.
5. Intégration du middleware : Le code intègre un middleware d'écoute pour gérer les effets secondaires tels que l'affichage de messages de réussite ou d'erreur en fonction du résultat des opérations CRUD. Il améliore également le middleware avec la possibilité de personnaliser le comportement des changements d'état, comme le déclenchement d'actions supplémentaires lorsque certaines conditions sont remplies.
6. Réutilisabilité optimisée du code : En utilisant cette approche de fonction d'ordre supérieur, les développeurs peuvent éviter le code passe-partout répétitif et créer des tranches dynamiques et réutilisables pour différentes entités sans écrire manuellement des actions et des réducteurs à chaque fois.
7. Extensible et modulaire : La fonction d'ordre supérieur produit les fonctionnalités nécessaires à partir d'un magasin redux pour une fonctionnalité, nous pouvons également tout étendre, des réducteurs à l'état initial, donc lorsque le point de terminaison personnalisé arrive, ce n'est pas le cas. complet dans les bases génériques que nous avons créées, nous pouvons simplement l'ajouter.

Meilleur,

Ahmed,

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!