{"id":7236,"date":"2021-01-19T20:30:05","date_gmt":"2021-01-19T19:30:05","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/using-redux-with-angular\/"},"modified":"2024-01-09T15:36:53","modified_gmt":"2024-01-09T14:36:53","slug":"using-redux-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/using-redux-with-angular\/","title":{"rendered":"Uso de Redux con Angular"},"content":{"rendered":"\n

<\/p>\n\n

Hoy vamos a aprender a introducir en el uso de REDUX gesti\u00f3n de<\/a> estados <\/a>en una aplicaci\u00f3n web Angular con la biblioteca NGRX<\/p>\n\n

El equivalente de REDUX para Angular es NGRX<\/a>.<\/p>\n\n

Tambi\u00e9n le puede interesar: “Unimedia nombrada l\u00edder tecnol\u00f3gico por Clutch”<\/a><\/p>\n\n

Adem\u00e1s, nuestro equipo de desarrolladores es experto en crear software a medida<\/a> seg\u00fan los requisitos del proyecto.<\/p>\n\n

<\/p>\n\n

Veremos paso a paso cada uno de los componentes b\u00e1sicos de NGRX<\/h2>\n\n

<\/p>\n\n

<\/p>\n\n

<\/p>\n\n

\"Diagrama
Fuente: https:\/\/ngrx.io\/<\/figcaption><\/figure>\n\n

<\/p>\n\n

Tienda<\/h3>\n\n

The Store <\/strong>es un contenedor de estado controlado dise\u00f1ado para ayudar a escribir aplicaciones escalables y de alto rendimiento sobre Angular.<\/p>\n\n

<\/p>\n\n

Efectos<\/h3>\n\n

Los Efectos <\/strong>utilizan los flujos para proporcionar nuevas fuentes<\/a> de acciones. Modificar el estado en funci\u00f3n de interacciones externas como solicitudes de red, mensajes de socket web<\/a> y eventos temporales. Por lo tanto, son el m\u00e9todo preferido para obtener datos y mantener parte de la l\u00f3gica de la aplicaci\u00f3n.<\/p>\n\n

<\/p>\n\n

Selectores<\/h3>\n\n

Los selectores son funciones puras que se utilizan para obtener porciones del estado de la tienda. As\u00ed, seleccionan piezas de informaci\u00f3n del Almac\u00e9n para que sean consumidas por otras partes de la l\u00f3gica de la aplicaci\u00f3n.<\/p>\n\n

<\/p>\n\n

Reductores<\/h3>\n\n

Los Reductores en NgRx son responsables de manejar las transiciones de un estado al siguiente estado en tu aplicaci\u00f3n. Las funciones reductoras gestionan estas transiciones determinando qu\u00e9 acciones <\/a>gestionar en funci\u00f3n del tipo de acci\u00f3n. En otras palabras, reciben acciones con una carga de datos y cambian el estado almacenando los nuevos datos seg\u00fan se desee.<\/p>\n\n

Despu\u00e9s de entender los bloques de construcci\u00f3n b\u00e1sicos de NGRX State Management, ahora vamos a construir una peque\u00f1a aplicaci\u00f3n de chat de ejemplo con NGRX State Management. <\/p>\n\n

Dado que, ya hemos creado una aplicaci\u00f3n de chat antes En el post anterior aqu\u00ed . <\/a> Como resultado, vamos a introducir la gesti\u00f3n de estado NGRX en \u00e9l para la actualizaci\u00f3n de la interfaz de usuario, mientras que el env\u00edo \/ recepci\u00f3n del mensaje.<\/p>\n\n

\nhttps:\/\/www.unimedia.tech\/2020\/11\/27\/aws-amplify-with-angular-chat\/\n<\/div><\/figure>\n\n

1. Configurar el proyecto<\/h2>\n\n
\/** Clone Repo *\/\ngit clone https:\/\/github.com\/unimedia-technology\/amplify-chat-angular.git\n\n\/** Enter into project directory *\/\ncd amplify-chat-angular\n\n\/** Install the dependencies *\/\nnpm i\n\n\/** Create a new git branch *\/\ngit checkout ngrx\n<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
2. Instalar las dependencias de NGRX<\/h2>\n\n
ng add @ngrx\/store @ngrx\/effects @ngrx\/component<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
3. Crear acciones<\/h2>\n\n
Aqu\u00ed, vamos a crear 4 acciones que son necesarias para gestionar el estado de la aplicaci\u00f3n de chat.<\/p>\n\n
Archivo<\/strong>: store\/actions\/actions.ts<\/p>\n\n
import { createAction, props } from '@ngrx\/store';\n\nexport const loadMessages = createAction('[Chat] Load Messages', props<{ channelId: string }>());\nexport const loadMessagesSuccess = createAction('[Chat] Load Messages Success', props<{ messages: any[] }>());\n\nexport const sendMessage = createAction('[Chat] Send Message', props<{ message }>());\nexport const addMessageToList = createAction('[Chat] Add Message To List', props<{ message }>());<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
4. Crear efectos<\/h2>\n\n
Los efectos <\/strong>proporcionan una forma de interactuar con esos servicios y aislarlos de los componentes.<\/p>\n\n
Utilizaci\u00f3n<\/h3>\n\n
Los efectos son \u00fatiles, Si desea manejar tareas como la obtenci\u00f3n de datos, tareas de larga duraci\u00f3n que producen m\u00faltiples eventos, y otras interacciones externas.<\/p>\n\n
<\/p>\n\n
Nota:<\/strong> Para recordar, en la mayor\u00eda de los escenarios, enviar\u00e1 acci\u00f3n(es), pero no es obligatorio enviar siempre acci\u00f3n(es). <\/p>\n\n
Para escribir efectos sin enviar la(s) acci\u00f3n(es), pase el segundo par\u00e1metro a las funciones createEffect()<\/strong><\/em><\/code> con { dispatch: false }<\/em><\/strong><\/code><\/p>\n\n
Archivo:<\/strong> state\/effects\/effects.ts<\/p>\n\n
<\/p>\n\n
import { Actions, createEffect, ofType } from '@ngrx\/effects';\nimport { Injectable } from '@angular\/core';\nimport { map, switchMap } from 'rxjs\/operators';\nimport * as chatActions from '..\/actions\/actions';\nimport { from } from 'rxjs';\nimport { APIService } from '..\/..\/API.service';\n\n@Injectable()\nexport class ChatEffects {\n\n  constructor(\n    private actions$: Actions,\n    private api: APIService,\n  ) { }\n\n  \/** Load the List of Messages *\/\n  loadMessages$ = createEffect(() => this.actions$.pipe(\n    ofType(chatActions.loadMessages),\n    switchMap(({ channelId }) => {\n      return from(this.api.MessagesByChannelId(channelId)).pipe(\n        map((res: any) => {\n          return chatActions.loadMessagesSuccess({ messages: res.items });\n        }),\n      );\n    })\n  ));\n\n  \/** Send message and call no actions *\/\n  sendMessage$ = createEffect(() => this.actions$.pipe(\n    ofType(chatActions.sendMessage),\n    switchMap(({ message }) => {\n      return from(this.api.CreateMessage(message));\n    })\n  ), { dispatch: false });\n}<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
5. Crear reductores<\/h2>\n\n
Cada funci\u00f3n reductora toma el \u00faltimo Action<\/a><\/code> enviado, el estado actual, y determina si devuelve un estado reci\u00e9n modificado o el estado original. Ahora, en el siguiente ejemplo te guiaremos sobre c\u00f3mo escribir funciones reductoras, registrarlas en tu Store<\/a><\/code>, y componer estados de funciones.<\/p>\n\n
Archivo:<\/strong> store\/reducers\/reducers.ts<\/p>\n\n
<\/p>\n\n
import { Action, createReducer, on } from '@ngrx\/store';\nimport * as chatActions from '..\/actions\/actions';\n\nexport interface IChatState {\n  messages: any[];\n}\n\n\/** Initial State *\/\nexport const initialState: IChatState = {\n  messages: [],\n};\n\nexport function chatReducer(state: IChatState | undefined, action: Action): IChatState {\n  return reducer(state, action);\n}\n\nconst reducer = createReducer<IChatState>(\n  initialState,\n\n  \/** Loaded Messafes *\/\n  on(chatActions.loadMessagesSuccess, (state, { messages }) => ({\n    ...state,\n    messages\n  })),\n\n  \/** Add message to the messages array *\/\n  on(chatActions.addMessageToList, (state, { message }) => ({\n    ...state,\n    messages: [...state.messages, message]\n  })),\n);\n<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
6. Crear selectores<\/h2>\n\n
El selector que hemos creado aqu\u00ed devolver\u00e1 el observable <\/strong>de todos los mensajes<\/p>\n\n
Archivo:<\/strong> store\/selectors\/selectors.ts<\/p>\n\n
<\/p>\n\n
import { createSelector } from '@ngrx\/store';\n\nexport const selectChatState = (state) => state;\n\nexport const selectMessages = createSelector(\n  selectChatState,\n  (state) => state.chat.messages\n);\n<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
7. Gestionar el Estado<\/h2>\n\n
En esta secci\u00f3n, vamos a ver cuales son todos los eventos donde necesitamos actualizar el estado:<\/p>\n\n