{"id":7178,"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-10T18:34:58","modified_gmt":"2024-01-10T17:34:58","slug":"using-redux-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/using-redux-with-angular\/","title":{"rendered":"Utilitzant Redux amb Angular"},"content":{"rendered":"\n

<\/p>\n\n

Avui aprendrem a introduir l’\u00fas de la gesti\u00f3<\/a> de l’estat de REDUX <\/a>en una aplicaci\u00f3 web angular amb la biblioteca NGRX<\/p>\n\n

L’equivalent REDUX per a Angular \u00e9s NGRX<\/a> .<\/p>\n\n

Tamb\u00e9 us pot interessar: “Unimedia nomenat com a l\u00edders tecnol\u00f2gics per Clutch”<\/a><\/p>\n\n

A m\u00e9s, el nostre equip de desenvolupadors s\u00f3n experts en la creaci\u00f3 de software personalitzat<\/a> segons els requisits del projecte.<\/p>\n\n

<\/p>\n\n

Veurem cada bloc de construcci\u00f3 de NGRX pas a pas<\/h2>\n\n

<\/p>\n\n

<\/p>\n\n

<\/p>\n\n

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

<\/p>\n\n

Botiga<\/h3>\n\n

El magatzem<\/strong> \u00e9s un contenidor d’estat controlat dissenyat per ajudar a escriure aplicacions de rendiment i escalables a sobre d’Angular.<\/p>\n\n

<\/p>\n\n

Efectes<\/h3>\n\n

Els efectes<\/strong> utilitzen fluxos per proporcionar noves fonts<\/a> d’accions. Per modificar l’estat en funci\u00f3 d’interaccions externes, com ara sol\u00b7licituds de xarxa, missatges de connexi\u00f3 web<\/a> i esdeveniments basats en el temps. Per tant, s\u00f3n el m\u00e8tode preferit per obtenir dades i mantenir part de la l\u00f2gica de l’aplicaci\u00f3.<\/p>\n\n

<\/p>\n\n

Selectors<\/h3>\n\n

Els Selectors s\u00f3n funcions pures utilitzades per obtenir porcions de l’estat de la botiga. Aix\u00ed, seleccionen peces d’informaci\u00f3 de la botiga que seran consumides per altres parts de la l\u00f2gica de l’aplicaci\u00f3.<\/p>\n\n

<\/p>\n\n

Reductors<\/h3>\n\n

Els reductors de NgRx s\u00f3n els responsables de gestionar les transicions d’un estat al seg\u00fcent a la vostra aplicaci\u00f3. Les funcions reductores gestionen aquestes transicions determinant quines accions<\/a> s’han de gestionar en funci\u00f3 del tipus d’acci\u00f3. En altres paraules, reben accions amb una c\u00e0rrega \u00fatil de dades i canvien l’estat emmagatzemant les dades noves com es desitgi.<\/p>\n\n

Despr\u00e9s d’entendre els blocs b\u00e0sics de la gesti\u00f3 de l’estat NGRX, ara construirem una aplicaci\u00f3 de xat petita d’exemple amb la gesti\u00f3 de l’estat NGRX. <\/p>\n\n

Des de llavors, ja hem creat una aplicaci\u00f3 de xat anteriorment a una publicaci\u00f3 anterior aqu\u00ed<\/a> . Com a resultat, introduirem la gesti\u00f3 de l’estat NGRX per actualitzar la interf\u00edcie d’usuari mentre s’envia\/recep el missatge.<\/p>\n\n

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

1. Configurar el projecte<\/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. Instal\u00b7lar les depend\u00e8ncies 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 accions<\/h2>\n\n
Aqu\u00ed, crearem 4 accions que s\u00f3n necess\u00e0ries per gestionar l’estat de l’aplicaci\u00f3 de xat.<\/p>\n\n
Fitxer<\/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 efectes<\/h2>\n\n
Els efectes<\/strong> ofereixen una manera d’interactuar amb aquests serveis i a\u00efllar-los dels components.<\/p>\n\n
\u00das<\/h3>\n\n
Els efectes s\u00f3n \u00fatils, si voleu gestionar tasques com ara obtenir dades, tasques de llarga durada que produeixen diversos esdeveniments i altres interaccions externes.<\/p>\n\n
<\/p>\n\n
Nota:<\/strong> per recordar, en la majoria dels escenaris, enviar\u00e0 accions, per\u00f2 no \u00e9s obligatori enviar sempre accions.  <\/p>\n\n
Per escriure efectes sense enviar les accions, passeu el segon par\u00e0metre acreateEffect()<\/strong><\/em><\/code> funcions amb  { dispatch: false }<\/em><\/strong><\/code><\/p>\n\n
Fitxer:<\/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 reductors<\/h2>\n\n
Cada funci\u00f3 de reducci\u00f3 pren el m\u00e9s recentAction<\/a><\/code> enviat, l’estat actual i determina si es retorna un estat recent modificat o l’estat original. Ara, en l’exemple seg\u00fcent us guiarem sobre com escriure funcions reductores, registreu-les al vostreStore<\/a><\/code> , i compondre estats de caracter\u00edstiques.<\/p>\n\n
Fitxer:<\/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 selectors<\/h2>\n\n
El selector que hem creat aqu\u00ed retornar\u00e0 l’ observable<\/strong> de tots els missatges<\/p>\n\n
Fitxer:<\/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 l’Estat<\/h2>\n\n
En aquesta secci\u00f3, veurem quins s\u00f3n tots els esdeveniments on hem d’actualitzar l’estat:<\/p>\n\n