Header Ads Widget

Ticker

6/recent/ticker-posts

Tienda Angular 10 NgRX por ejemplo

 En este tutorial, aprenderemos cómo usar la tienda NgRX en nuestra aplicación de ejemplo Angular 10. Veremos cómo podemos crear acciones, reductores y acciones de eliminación.

La tienda Angular NgRx es un patrón de administración de datos del lado del cliente que implementa el patrón Redux, inventado por Facebook, utilizando observables RxJS.

Como requisito previo, debe tener Node.js y Angular CLI instalados en su máquina de desarrollo local,

Tienda Angular 10 NgRx por ejemplo

Abra una nueva interfaz de línea de comandos y ejecute los siguientes comandos:

$ ng new angular10ngrx
$ cd angular10ngrx 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, cree un nuevo componente angular con el siguiente comando:

$ ng g c product

A continuación, un archivo dentro de la src/app/productcarpeta con el product.model.tssiguiente nombre:

export interface Product {
  name: string;
  price: number;
}

Instalación de bibliotecas NgRx

A continuación, ejecute el siguiente comando para instalar ngrxdesde npm en su proyecto de la siguiente manera:

$ npm install @ngrx/core
$ npm install @ngrx/store
$ npm install @ngrx/effects

Creación de un reductor NgRx

Cree una src/app/reducerscarpeta y un archivo product.reducer.tscon el siguiente código:

// product.reducer.ts

import { Product } from './../product/product.model';
import { Action } from '@ngrx/store';

export const ADD_PRODUCT = 'ADD_PRODUCT';

export function addProductReducer(state: Product[] = [], action) {
  switch (action.type) {
    case ADD_PRODUCT:
        return [...state, action.payload];
    default:
        return state;
    }
}

Configuración de la tienda NgRx

A continuación, abra el src/app/app.module.tsarchivo y actualícelo de la siguiente manera:

// app.module.ts

import { StoreModule } from '@ngrx/store';
import { addProductReducer } from './reducers/product.reducer';

 imports: [
    BrowserModule,
    StoreModule.forRoot({product: addProductReducer})
],

Simplemente pasamos nuestro reductor a la tienda. Podemos actualizar el estado de nuestra aplicación enviando las acciones a la tienda.

A continuación, abra el src/app/product/product.component.tsarchivo y actualícelo de la siguiente manera:

// src/app/product/product.component.ts

import { Product } from './product.model';
import { AppState } from './../app.state';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Observable<Product[]>;

  constructor(private store: Store<AppState>) {
    this.products = this.store.select(state => state.product);
   }

  addProduct(name, price) {
    this.store.dispatch({
      type: 'ADD_PRODUCT',
      payload: <Product> {
        name: name,
        price: price
      }
    });
  }

  ngOnInit() {
  }

}

Primero nos suscribimos a la tienda y buscamos los productos, luego agregamos una acción para agregar un producto a la tienda.

A continuación, cree un src/app/app.state.tsarchivo y agregue el siguiente código:

// src/app/app.state.ts

import { Product } from './product/product.model';

export interface AppState {
  readonly product: Product[];
}

Desplazamiento de las acciones de NgRx

A continuación, abra el src/app/product/product.component.htmlarchivo y actualícelo de la siguiente manera:

<div class="panel panel-primary">
    <div class="panel-body">
      <form>
        <div class="form-group">
          <label class="col-md-4">Product Name</label>
          <input type="text" class="form-control" #productName/>
        </div>
        <div class="form-group">
          <label class="col-md-4">Product Price</label>
          <input type="text" class="form-control" #productPrice />
          </div>
          <div class="form-group">
            <button (click) = "addProduct(productName.value, productPrice.value)" class="btn btn-primary">Add Product</button>
          </div>
      </form>
    </div>
  </div>

<table class="table table-hover" *ngIf="products != 0">
  <thead>
  <tr>
      <td>Product Name</td>
      <td>Product Price</td>
  </tr>
  </thead>
  <tbody>
      <tr *ngFor="let product of products | async">
          <td></td>
          <td></td>
      </tr>
  </tbody>
  </table>

Primero creamos un formulario para crear un nuevo producto enviando la acción correspondiente a la tienda y luego creamos una tabla para mostrar los productos que hemos creado en la tienda. La productsvariable es observable, por lo que usamos la asynctubería para suscribirla .

Usamos Bootstrap 4 para agregar estilos a nuestra aplicación. Lea cómo puede agregar Bootstrap a su aplicación Angular 10 .

Puede servir su aplicación usando el siguiente comando:

$ ng serve --open

Conclusión

En este ejemplo rápido, aprendimos cómo usar la tienda ngrx en nuestra aplicación de ejemplo Angular 10. Hemos visto cómo podemos distribuir acciones y crear reductores.

Publicar un comentario

0 Comentarios