Este artículo es una continuación de la publicación "Angular: una introducción completa a NGRX"Ejemplo NGRX
En nuestro ejemplo, habrá una lista de usuarios, una página de detalles del usuario y cierta información de configuración inicial que debe obtener cuando inicie la aplicación. Vamos a implementar algunos hilos importantes de NGRX.Plan de ACCION:- Instalación de la biblioteca
- Crear una estructura de carpetas para el almacenamiento
- Creación de almacenamiento y valores iniciales.
- Crear acciones
- Crear cajas de engranajes (reductores)
- Creando efectos
- Crear selectores
- Configuración final
- Usar almacenamiento en componentes
Hagamoslo ...Instalación de la biblioteca
Vamos a usar Angle Cli para crear el proyecto, y luego agregaremos las bibliotecas ngrx.Crea un proyecto:ng new angular-ngrx --style=scss
Agregue las bibliotecas NGRX necesarias:npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save
Instalamos casi todas las bibliotecas del ecosistema ngrx. La mayoría de ellos describe con claridad su propósito: núcleo, almacenamiento, efectos, pero hay un par para el que puede preguntarse por qué son necesarios.- store-devtools : una poderosa herramienta de depuración.
- router-store : guarda el estado del enrutador angular en el almacenamiento.
Estructura de carpetas para almacenamiento
Comencemos discutiendo la estructura de archivos del repositorio. Esta estructura de archivos y toda la configuración de almacenamiento deben existir en el módulo principal de su aplicación, pero en nuestro ejemplo está ausente, por lo tanto, el almacenamiento existirá en el módulo principal de nuestra aplicación (los pasos son casi los mismos si hace esto en el módulo principal).
La estructura de carpetas es una representación de la composición de almacenamiento real. Tendrá una carpeta principal con el nombre "tienda" y cinco subcarpetas que representan a cada uno de los jugadores clave en la tienda: "Acciones", "Efectos", "Redurs", "Selectores" y "Estado".Creación de almacenamiento y valores iniciales.
Como mencionamos anteriormente, tendremos dos secciones principales: nuestra aplicación, usuarios y configuración. Para ambos, necesitamos crear un estado y un estado inicial, y también hacer lo mismo para el estado de la aplicación.Creamos dos interfaces para la definición y configuración del usuario. También tenemos uno para la respuesta HTTP del usuario, es solo una matriz IUser.
Comencemos con el estado del usuario (store / state / user.state.ts):
¿Qué estamos haciendo aquí?- Creamos y exportamos una interfaz con una estructura de entorno de usuario.
- Hacemos lo mismo con el estado de usuario inicial, que implementa la interfaz recién creada.
Para el estado de configuración, hacemos lo mismo (store / states / config.state.ts):
Finalmente, necesitamos generar el estado de la aplicación (store / states / app.state.ts):
- El estado de la aplicación contiene el estado y la configuración del usuario, así como el estado del enrutador.
- Luego establecemos el estado inicial de la aplicación.
- Finalmente, exporta la función para obtener el estado inicial (lo usaremos más adelante).
Crear acciones
Asegúrese de leer la definición de acción que discutimos en el artículo anterior .
Necesitamos crear acciones para usuarios y configuraciones. Comencemos con las acciones del usuario (store / actions / user.actions.ts): veamos
un poco el código:- Enum, . , , , .
- . Action ngrx. , , , .
- , , . , , , .
Y eso es todo ... crear acciones es fácil. Veamos cómo se ven las acciones de configuración (store / actions / config.actions.ts):
aquí no hay nada nuevo, probablemente ahora se sienta cómodo con todo lo que sucede en este archivo.Genial, ya hemos determinado el estado y las acciones ... ¡creemos engranajes!Crear cajas de engranajes
Asegúrese de leer la definición de cajas de cambios que discutimos en un artículo anterior .
Tendremos cajas de cambios que respondan a algunas acciones, porque otras serán manejadas por los efectos que implementaremos más adelante.Necesitaremos un reductor para los usuarios y otro para la configuración, pero también necesitaremos generar reductores de aplicaciones, comencemos analizando los reductores de usuarios (store / redurs / user.reducers.ts): Discutamos
la implementación:- Una declaración de reductor recibe un estado y, en este caso, una acción del usuario y devuelve un IUserState.
- Usando la instrucción switch, generamos observaciones para cada tipo de acción posible.
- Cada caso devuelve un nuevo objeto, que es el resultado de la fusión del estado anterior y el nuevo valor.
- Todas las cajas de cambios tienen un resultado predeterminado, que simplemente devuelve el estado sin ningún cambio.
Y es todo. No encontrarás nada más en la caja de cambios. Echemos un vistazo a los reductores de configuración (state / redurs / config.reducers.ts):
Finalmente, echemos un vistazo a los reductores de la aplicación (tienda):
aquí agregamos todos los reductores al mapa reductor de la aplicación. Utilizamos un mapa reductor de acciones para la verificación de tipo adicional. Más adelante proporcionaremos esta aplicación con reductores para el módulo de la tienda.Añade efectos
Asegúrese de leer la definición de "Efectos", que discutimos en un artículo anterior .
Probablemente ya haya notado que en las cajas de cambios no procesamos todas las acciones. Esto se debe a que vamos a manejar acciones perdidas en los efectos, porque estas acciones tienen efectos secundarios.Comencemos con los efectos personalizados (store / effects / user.effects.ts):
mucho de lo que sucede en este archivo. Tratemos de explicarlos:- Declaramos nuestros efectos personalizados utilizando un decorador de inyección.
- Declaramos nuestros efectos utilizando el decorador de efectos proporcionado por ngrx / Effects.
- Usando las acciones proporcionadas por ngrx / Effects, vamos a comenzar la canalización de nuestro operador para este efecto.
- El siguiente paso es establecer el tipo de acción del efecto utilizando el operador ofType.
- Las siguientes partes son los operadores de rxjs que utilizamos para obtener lo que necesitamos (ya tenemos un enlace a la documentación de rxjs en este artículo).
- Finalmente, en la última declaración, Effect enviará otra acción.
- En el constructor, implementamos los servicios que vamos a usar, las acciones para ngrx / Effects, y en este caso también el repositorio (tenga en cuenta que esta es una demostración, y obtenemos al usuario seleccionado de la lista de usuarios en nuestro repositorio).
Esta es casi la misma estructura que verá con cualquier efecto. En este caso, enviamos solo una acción exitosa, pero podemos enviar errores o cualquier otro estado que queramos procesar en nuestros reductores de aplicaciones.Considere los efectos de configuración (store / effects / config.effects.ts):
ahora es el momento de hablar sobre los selectores ..., .
No tiene sentido repetir las porciones de nuestro estado en todas partes, así que creemos algunos selectores que podamos reutilizar.Como siempre, primero veamos los selectores de usuario (store / selectors / user.selectors.ts):
esto es realmente comprensible porque no hacemos ninguna transformación de datos en nuestros selectores, sino que simplemente devolvemos el segmento de la tienda al que hace referencia el selector usando la función createSelector de ngrx / store.El primer parámetro es un fragmento del almacenamiento que se usará para recibir datos (puede ser una matriz con varias partes del estado), el segundo parámetro es una función anónima que decidirá qué devolverá el selector.Veamos los selectores de configuración (store / selectors / config.selectors.ts):
Configuración final
Bueno, hemos creado todo lo que nuestro almacenamiento necesita, pero aún nos falta una cosa: unir todo. Voy a hacer esto en el módulo de aplicación, pero puede aplicar lo mismo en el módulo principal de su aplicación.Agreguemos un módulo de aplicación:
¿Qué hemos hecho aquí?- Importamos nuestras cajas de cambios y las proporcionamos en el módulo de almacenamiento forRoot.
- Importamos nuestros efectos y los proporcionamos dentro de la matriz en el módulo de efectos forRoot.
- Configuramos la configuración para el módulo de estado del enrutador que proporciona el enrutador stateKey.
- Y agregamos herramientas para desarrolladores de tiendas si el entorno no es la producción.
Los primeros dos pasos son necesarios, mientras que los pasos 3 y 4 los recomiendo, pero no son obligatorios.Ahora finalmente lo hemos hecho ... ¡podemos usar nuestro almacenamiento en componentes!Uso de almacenamiento en algunos componentes
Nos estamos acercando al final! Veamos cómo usar nuestro almacenamiento ...Primero, obtengamos la configuración cuando se inicie la aplicación:
- Estamos agregando almacenamiento a nuestro componente app.com.
- Establecemos la propiedad del componente en el valor del selector en la configuración, porque queremos mostrar parte de esta información en HTML.
- En onInit, enviamos la acción para obtener la configuración.
Eso es todo ... Ya estamos codificando un efecto que controlará esta acción, y un reductor que manejará este efecto. Tan pronto como la Tienda entre en un nuevo estado, el selector cambiará el valor de nuestra propiedad.Cómo asociar esto con HTML:
Tan pronto como config $ tenga un valor, lo veremos en HTML.Ahora veamos la lista de usuarios (contenedores / users / users.component.ts):
- Así como gestionamos la configuración, vamos a obtener una lista de usuarios. Primero, inyectamos el repositorio en el componente del usuario.
- En onInit, publicamos una acción para obtener usuarios.
- Creamos una propiedad para el componente y le asignamos una lista de usuarios utilizando el selector de lista de usuarios.
HTML tiene este aspecto:
mostramos la lista de usuarios en el componente de presentación, enviamos la lista y asociamos al usuario seleccionado con la función de navegación que se puede ver en el componente contenedor de usuario anterior.Veamos el componente contenedor personalizado:
este componente recibe el identificador de parámetro de la ruta activada, y probablemente ya esté familiarizado con el resto, envía el identificador como parámetro, selecciona el usuario seleccionado ...Si está depurando la aplicación, puede ver las herramientas del desarrollador, que son bastante simples para usar ... pero en este artículo hemos estudiado lo suficiente, y espero que pueda descubrir fácilmente estas herramientas.Conclusión
En este artículo, traté de proporcionar una introducción clara y comprensible a NGRX, proporcionándole todo lo que necesita saber para comenzar el desarrollo con esta herramienta.Realmente espero que el artículo te ayude a comprender la plantilla de acción y recomiende que la descargues y juegues un poco con el código.