{"id":1977,"date":"2023-11-23T17:54:56","date_gmt":"2023-11-23T20:54:56","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1977"},"modified":"2023-11-23T17:54:57","modified_gmt":"2023-11-23T20:54:57","slug":"capitulo-7-gestion-de-estado","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-7-gestion-de-estado\/","title":{"rendered":"Cap\u00edtulo 7: Gesti\u00f3n de Estado"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">7.1 Introducci\u00f3n a la Gesti\u00f3n de Estado<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">La gesti\u00f3n de estado es un aspecto cr\u00edtico en las aplicaciones Angular. Ayuda a mantener y gestionar la informaci\u00f3n y los datos de la aplicaci\u00f3n de una manera predecible y escalable. En Angular, la gesti\u00f3n de estado se puede lograr a trav\u00e9s de librer\u00edas como NgRx.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7.2 Integraci\u00f3n de NgRx para la Gesti\u00f3n de Estado<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">NgRx es una librer\u00eda popular que implementa la arquitectura de Redux para gestionar el estado en aplicaciones Angular. Para integrar NgRx en tu proyecto, sigue estos pasos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Instala NgRx:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @ngrx\/store @ngrx\/effects @ngrx\/entity @ngrx\/router-store @ngrx\/store-devtools --save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Configura el Store:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En tu m\u00f3dulo principal (generalmente, <code>app.module.ts<\/code>), configura el store de NgRx. Define tus reducers y efectos, y proporciona el store en tu aplicaci\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { StoreModule } from '@ngrx\/store';\r\nimport { EffectsModule } from '@ngrx\/effects';\r\n\r\n@NgModule({\r\n  imports: &#91;\r\n    StoreModule.forRoot({ \/* tus reducers aqu\u00ed *\/ }),\r\n    EffectsModule.forRoot(&#91;\/* tus efectos aqu\u00ed *\/]),\r\n  ]\r\n})\r\nexport class AppModule { }\r<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">7.3 Creaci\u00f3n de Acciones, Reducers y Efectos<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Acciones: <\/strong>Las acciones son objetos que describen un cambio en el estado de la aplicaci\u00f3n. Debes definir tipos de acciones y crear funciones que retornen instancias de acciones.<\/li>\n\n\n\n<li><strong>Reducers:<\/strong> Los reducers son funciones puras que toman el estado actual y una acci\u00f3n, y devuelven un nuevo estado. Debes definir reducers para manejar cada tipo de acci\u00f3n.<\/li>\n\n\n\n<li><strong>Efectos: <\/strong>Los efectos son utilizados para gestionar efectos secundarios, como solicitudes HTTP. Debes definir efectos para escuchar acciones y realizar tareas asincr\u00f3nicas.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">7.4 Uso del Store en la Aplicaci\u00f3n<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que hayas configurado NgRx y definido acciones, reducers y efectos, puedes usar el store en tus componentes para acceder y modificar el estado de la aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selector de Estado: <\/strong>Puedes crear selectores para acceder a porciones espec\u00edficas del estado de la aplicaci\u00f3n. Los selectores ayudan a evitar la manipulaci\u00f3n directa del estado.<\/li>\n\n\n\n<li><strong>Dispatch de Acciones:<\/strong> Utiliza el m\u00e9todo <code>dispatch<\/code> del store para disparar acciones en respuesta a eventos en tus componentes.<\/li>\n\n\n\n<li><strong>Observaci\u00f3n del Estado:<\/strong> Utiliza observables para observar los cambios en el estado y actualizar la interfaz de usuario en consecuencia.<\/li>\n\n\n\n<li><strong>Modificaci\u00f3n del Estado:<\/strong> Si es necesario, puedes modificar el estado de la aplicaci\u00f3n utilizando acciones y reducers, asegur\u00e1ndote de mantener un flujo de datos unidireccional.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3digo que muestra todos los conceptos sobre la gesti\u00f3n de estado con NgRx en Angular. En este ejemplo, crearemos una peque\u00f1a aplicaci\u00f3n para gestionar una lista de tareas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 1: Configuraci\u00f3n de NgRx<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Instala NgRx: <\/strong>Ejecuta el siguiente comando para instalar las dependencias necesarias:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @ngrx\/store @ngrx\/effects @ngrx\/entity @ngrx\/router-store @ngrx\/store-devtools --save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 2: Define las acciones, reducers y efectos<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Paso 2: Define las acciones\r\nimport { createAction, props } from '@ngrx\/store';\r\n\r\nexport const addTask = createAction('&#91;Task] Add Task', props&lt;{ task: string }>());\r\nexport const completeTask = createAction('&#91;Task] Complete Task', props&lt;{ taskId: number }>());\r\nexport const deleteTask = createAction('&#91;Task] Delete Task', props&lt;{ taskId: number }>());\r\nexport const loadTasks = createAction('&#91;Task] Load Tasks', props&lt;{ tasks: string&#91;] }>());\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 3: Define el estado y los reducers<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Paso 3: Define el estado y los reducers\r\nimport { createEntityAdapter, EntityState } from '@ngrx\/entity';\r\nimport { createReducer, on } from '@ngrx\/store';\r\nimport * as TaskActions from '.\/task.actions';\r\n\r\nexport interface TaskState extends EntityState&lt;string> {\r\n  selectedTaskId: number | null;\r\n}\r\n\r\nexport const taskAdapter = createEntityAdapter&lt;string>();\r\n\r\nexport const initialState: TaskState = taskAdapter.getInitialState({\r\n  selectedTaskId: null,\r\n});\r\n\r\nexport const taskReducer = createReducer(\r\n  initialState,\r\n  on(TaskActions.addTask, (state, { task }) => taskAdapter.addOne(task, state)),\r\n  on(TaskActions.completeTask, (state, { taskId }) => taskAdapter.updateOne({ id: taskId, changes: { completed: true } }, state)),\r\n  on(TaskActions.deleteTask, (state, { taskId }) => taskAdapter.removeOne(taskId, state)),\r\n  on(TaskActions.loadTasks, (state, { tasks }) => taskAdapter.setAll(tasks, state))\r\n);\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 4: Define los efectos<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Paso 4: Define los efectos\r\nimport { Actions, createEffect, ofType } from '@ngrx\/effects';\r\nimport { Injectable } from '@angular\/core';\r\nimport { of } from 'rxjs';\r\nimport { catchError, map, mergeMap } from 'rxjs\/operators';\r\nimport { TaskService } from '.\/task.service'; \/\/ <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Asumimos que existe un servicio TaskService para cargar tareas<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Injectable()\r\nexport class TaskEffects {\r\n  loadTasks$ = createEffect(() =>\r\n    this.actions$.pipe(\r\n      ofType(TaskActions.loadTasks),\r\n      mergeMap(() =>\r\n        this.taskService.getTasks().pipe(\r\n          map((tasks) => TaskActions.loadTasks({ tasks })),\r\n          catchError(() => of(TaskActions.loadTasksFailure()))\r\n        )\r\n      )\r\n    )\r\n  );\r\n\r\n  constructor(private actions$: Actions, private taskService: TaskService) {}\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 5: Configurar el M\u00f3dulo Principal<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Paso 5: Configurar el m\u00f3dulo principal\r\nimport { StoreModule } from '@ngrx\/store';\r\nimport { EffectsModule } from '@ngrx\/effects';\r\nimport { taskReducer } from '.\/state\/task.reducer';\r\nimport { TaskEffects } from '.\/state\/task.effects';\r\n\r\n@NgModule({\r\n  imports: &#91;\r\n    StoreModule.forRoot({ tasks: taskReducer }),\r\n    EffectsModule.forRoot(&#91;TaskEffects]),\r\n  ],\r\n})\r\nexport class AppModule {}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paso 6: Uso del Store en un Componente<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Paso 6: Uso del Store en un Componente\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Store, select } from '@ngrx\/store';\r\nimport { addTask, completeTask, deleteTask, loadTasks } from '.\/state\/task.actions';\r\nimport { TaskState } from '.\/state\/task.reducer';\r\nimport { selectAllTasks, selectSelectedTask } from '.\/state\/task.selectors';\r\n\r\n@Component({\r\n  selector: 'app-task-list',\r\n  template: `\r\n    &lt;ul>\r\n      &lt;li *ngFor=\"let task of tasks$ | async\">\r\n        {{ task }}\r\n        &lt;button (click)=\"completeTask(task)\">&lt;\/button>\r\n        &lt;button (click)=\"deleteTask(task)\">&lt;\/button>\r\n      &lt;\/li>\r\n    &lt;\/ul>\r\n  `,\r\n})\r\nexport class TaskListComponent implements OnInit {\r\n  tasks$ = this.store.pipe(select(selectAllTasks));\r\n  selectedTask$ = this.store.pipe(select(selectSelectedTask));\r\n\r\n  constructor(private store: Store&lt;TaskState>) {}\r\n\r\n  ngOnInit() {\r\n    this.store.dispatch(loadTasks());\r\n  }\r\n\r\n  addTask(task: string) {\r\n    this.store.dispatch(addTask({ task }));\r\n  }\r\n\r\n  completeTask(taskId: number) {\r\n    this.store.dispatch(completeTask({ taskId }));\r\n  }\r\n\r\n  deleteTask(taskId: number) {\r\n    this.store.dispatch(deleteTask({ taskId }));\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo muestra c\u00f3mo utilizar NgRx para gestionar el estado en una aplicaci\u00f3n Angular. Puedes observar la definici\u00f3n de acciones, reducers, efectos, el uso del store en el componente y c\u00f3mo las acciones se disparan en respuesta a eventos del usuario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La gesti\u00f3n de estado con NgRx permite mantener una aplicaci\u00f3n predecible y escalable, especialmente en aplicaciones con una gran cantidad de datos y complejidad. Tambi\u00e9n facilita la depuraci\u00f3n y el mantenimiento a medida que tu aplicaci\u00f3n crece.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>7.1 Introducci\u00f3n a la Gesti\u00f3n de Estado La gesti\u00f3n de estado es un aspecto cr\u00edtico en las aplicaciones Angular. Ayuda a mantener y gestionar la informaci\u00f3n y los datos de la aplicaci\u00f3n de una manera predecible y escalable. En Angular, la gesti\u00f3n de estado se puede lograr a trav\u00e9s de librer\u00edas como NgRx. 7.2 Integraci\u00f3n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado.jpg",1280,720,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado-300x169.jpg",300,169,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado-768x432.jpg",768,432,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado.jpg",1280,720,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Estado.jpg",1280,720,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"7.1 Introducci\u00f3n a la Gesti\u00f3n de Estado La gesti\u00f3n de estado es un aspecto cr\u00edtico en las aplicaciones Angular. Ayuda a mantener y gestionar la informaci\u00f3n y los datos de la aplicaci\u00f3n de una manera predecible y escalable. En Angular, la gesti\u00f3n de estado se puede lograr a trav\u00e9s de librer\u00edas como NgRx. 7.2 Integraci\u00f3n&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1977"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1977\/revisions"}],"predecessor-version":[{"id":1979,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1977\/revisions\/1979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1978"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}