• LOGIN
  • No hay productos en el carrito.

Imagen de perfil

Ionic y Ngrx, acceso global a datos

curso de ionic 3

Algo que puede ser muy interesante es la posibilidad de utilizar Ionic y Ngrx en una misma aplicación, en la plataforma ya vemos cómo trabajar con algo muy similar, Redux, tanto con Angular como con React.

Una de las mejores alternativas para conseguir este propósito puede ser utilizar ngrx store o mejor aún, una versión optimizada para Ionic la cual utiliza Ionic Storage para que funcione de forma correcta en nuestras aplicaciones.

Las características de utilizar una tienda de datos para manejar la información de la aplicación son las siguientes.

  • El estado es una única estructura de datos inmutable.
  • Las acciones describen los cambios de estado.
  • Las funciones puras llamadas reductores toman el estado anterior y la siguiente acción para calcular el nuevo estado.

Eso es lo único que debemos conocer de los contenedores de datos inspirados en Redux, trabajan con una estructura de datos inmutable, es decir, para alterarla, debemos reemplazar la información a despachando acciones que ejecuten reducers, de esta forma podremos tener alcance a los datos en toda nuestra app directamente desde la Store.


Para entender de forma perfecta cómo podemos utilizar almacenes de datos del estilo Ngrx o Redux en nuestras aplicaciones, el siguiente código muestra el paso a paso de forma completa.

Ionic y Ngrx: Acciones

Las acciones deben ser lo más sencillas posibles, retornan un objeto que debe contener una clave llamada type, la cual definirá el tipo de acción a ejecutar.

Ionic y Ngrx: Reducers

Los reducers deben comprobar el tipo de acción que se ha ejecutado, normalmente a través de un switch, y devolver el nuevo estado, si ninguno de los casos se ejecutan, debe establecer la cláusula default para retornar el estado actual de la aplicación sin modificar.

Ionic y Ngrx: Componentes

Finalmente sólo nos quedaría poder ejecutar las acciones que hemos definido para que disparen los reducers y alteren los datos de nuestra aplicación a nivel global, para ello el siguiente componente, sea en Ionic o Angular es completamente funcional.

Esta entrada es una sencilla introducción de lo que vamos a ver en las próximas actualizaciones del curso de Ionic 3, espero que te haya parecido interesantes y si es así te invito a que te suscribas al curso.

4 mayo, 2017
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

X