Fermer

mars 27, 2019

Construire un magasin d'alimentation en utilisant Redux et Angular


Lorsque les applications deviennent complexes, il peut être difficile de gérer leurs données. Dans ce didacticiel, découvrez comment utiliser la bibliothèque de gestion d'état Redux pour créer un magasin d'alimentation affichant les articles et permettant aux utilisateurs de les ajouter à un panier.

Gestion d'une application dans laquelle les composants qui l'entourent doivent communiquer directement entre eux. Angular n’a pas de magasin intégré à l’ensemble de l’application. Lorsque les applications sont aussi complexes, la gestion des données dans l’application devient difficile. C'est là que l'importance des bibliothèques de gestion d'état telles que Redux, MobX et ngrx / store se pose.

Un avantage important des bibliothèques de gestion d'état dans les applications à grande échelle, en particulier les applications hiérarchiques, réside dans la capacité à abstraire l'état de l'application à partir de composants. dans un état d'application. De cette façon, les données peuvent être échangées facilement et les composants peuvent agir indépendamment les uns des autres.

Pour Angular, une excellente bibliothèque de gestion d'état est Redux . Redux est un conteneur à états prévisibles pour les applications JavaScript. Redux fournit un seul magasin immuable et cohérent avec l’état de l’application. Il utilise un flux de données unidirectionnel et utilise des actions pour transformer l'état de l'application en réponse à un événement. Il utilise une API composée d’actions, de réducteurs, etc.

Nous allons utiliser un paquet qui fournit des liaisons pour Redux dans les applications angulaires. La bibliothèque @ angular-redux / store utilise des observables sous le capot pour améliorer les fonctionnalités de Redux pour Angular.

Dans ce tutoriel, nous allons construire un magasin d’alimentation utilisant Angular. Dans cette boutique, un utilisateur visualisera les articles affichés dans la boutique et pourra ajouter et supprimer des articles du panier. Nous allons configurer un serveur minimal avec Express qui servira les produits à l’application Angular.

Pour suivre ce didacticiel, une compréhension de base de Angular et Node.js est requise. Assurez-vous que Node et npm sont installés avant de commencer.

Si vous ne connaissez pas Angular, veuillez suivre le tutoriel ici . Revenez et terminez le didacticiel lorsque vous aurez terminé.

Nous allons utiliser ces outils pour créer notre application:

Voici une capture d’écran du produit final:

.

Initialisation de l'application et installation des dépendances

Pour commencer, nous allons utiliser le CLI (interface de ligne de commande) fourni par l'équipe Angular pour initialiser notre projet.

Tout d'abord, installez le CLI par en cours d'exécution npm installer -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour l'installation de paquets. Il sera disponible sur votre PC si vous avez Node installé. Sinon, téléchargez le nœud ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:
dans le nouveau magasin redux-store --style = scss [19659003] Cette commande est utilisée pour initialiser un nouveau projet angulaire. le projet utilisera SCSS comme préprocesseur.

Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:

     //  install  des dépendances requises pour générer le serveur.
     npm   installer  un analyseur de corps express
    
    // dépendances frontales
     npm   installer  redux @ angular-redux / store

Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.

Construction de notre serveur

Nous allons construire notre serveur avec Express . Express est un framework web minimal, rapide et sans opinion pour Node.js .

Créez un fichier appelé server.js à la racine du projet et mettez-le à jour avec l'extrait de code. ci-dessous:

  // server.js 
  const  express  =   require  ( 'express' ) ; 
  const  bodyParser  =   require  ( "analyseur de corps" ) ; 
  const  app  =   express  (] ) ; 
  const  port  =  processus .  env .  PORT  ||   4000 [19659028]; 
  const  fruits  =   require  ( './ fruits' ) ; 
     
     app .  utilisez  ( bodyParser .  json  () ) ; 
     app .  use  ( bodyParser .  codé en format  [ { extended :   false  } [19659028]) ) ; 
     app .  use  [ ( req  res 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link