Angular 4: CRUD con ngrx

Nada como comenzar el 2018 con un ejemplo super practico de Angular 4 con ngrx.

Nuestro ejemplo solo es una tabla llenada por medio de un servicio REST la cual la tabla tiene la posibilidad de editar y eliminar el producto, aparte de agregar productos esto apoyándonos de un modal.

La estructura de nuestro proyecto lo intente de implementar de la forma más limpia y ordenada posible ya depende de ustedes como la quieran reordenar.

En nuestro proyecto las librerías que se usaron de ngrx fueron :

  1. store
  2. effects
  3. store-devtools

 

Se creo 1 componente el cual tendrá toda nuestra lógica de ngrx creando sus respectivas carpetas de actions,reducers,effects… dicho componente tiene implementado ruteo el cual por default siempre al cargar nuestro proyecto nos redireccionara al componente ‘productos’.

Dentro de nuestro componente Productos , tenemos dos sub componentes los cuales son Lista de Productos y  Modal Productos , el cual Lista de productos es instanciada dentro del componente padre Productos y el componente Modal Productos lo tenemos por medio de eventos @Input para recibir información que le mandamos desde el componente Lista de Productos.

Nuestro modelo :

Nuestros stores están de la siguiente forma:

Actions

Effects

Reducers

Nuestros servicios REST , nuestro back-end está construido con PHP no me meteré a detalle con ello si gustas ver el código del back-end lo puedes visualizar AQUI.

Les comparto el pequeño demo de como se visualiza nuestro ejemplo.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.