Fermer

mai 13, 2019

Construire une boutique en ligne en utilisant ngrx / store et Angular


Dans ce didacticiel, nous allons créer un magasin simple où les articles peuvent être ajoutés et retirés du panier, et nous allons gérer l’état de l’application à l’aide de ngrx / store. Comme nous le verrons, il est plus facile de gérer le flux de données dans l'application lorsque les effets secondaires et le flux de données sont extraits des composants.

La gestion d'une application est une tâche, car l'application devient un labyrinthe sans fin qui nécessite une carte improvisée. naviguer. Lorsque les applications deviennent aussi complexes, la gestion des données dans l’application devient un véritable casse-tête. C’est là que l’importance de bibliothèques de gestion d’État telles que Redux MobX et ngrx / store apparaît.

Un avantage important des bibliothèques de gestion d’État dans les applications à grande échelle, en particulier les applications hiérarchiques, est la capacité à 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 ngrx / store . Il s'agit d'une bibliothèque de gestion d'état alimentée par RxJS . Il utilise une syntaxe similaire à Redux: actions, réducteurs, magasins, effets et API réactive de RxJS.

Dans ce didacticiel, nous allons créer un magasin de fruits en utilisant Angular. Dans notre petit magasin, un utilisateur pourra ajouter et supprimer des fruits du panier. Nous verrons également comment utiliser Effects pour la gestion des requêtes réseau, des réducteurs et des actions de gestion des données. Nous allons configurer un serveur minimal utilisant Express qui servira les produits à l’application Angular.

Pour suivre ce didacticiel, une compréhension de base de Angular et de 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 ce didacticiel lorsque vous aurez terminé.

Nous allons utiliser ces outils pour construire notre application:

Voici une capture d'écran du produit final:

finalproduct "title =" finalproduct "/></p data-recalc-dims=

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.

D'abord, installez la CLI en exécutant npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des 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:
un nouveau magasin de fruits --style = scss

Cette commande est utilisée pour initialiser un nouveau projet Angular, qui utilisera SCSS comme pré-processeur.

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

   //  install  les dépendances requises pour construire le serveur.
   npm   installer  un analyseur de corps express
    
  // dépendances frontales
   npm   installer  @ ngrx / store @ ngrx / effects

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

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