{"id":7316,"date":"2021-01-19T20:30:05","date_gmt":"2021-01-19T19:30:05","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/verwendung-von-redux-mit-angular\/"},"modified":"2023-12-18T13:08:10","modified_gmt":"2023-12-18T12:08:10","slug":"verwendung-von-redux-mit-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/verwendung-von-redux-mit-angular\/","title":{"rendered":"Verwendung von Redux mit Angular"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Today we are going to learn how to introduce on using REDUX State management in an Angular Web Application with the NGRX library<\/p>\n\n\n\n

REDUX equivalent for Angular is NGRX<\/a>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

We will see each building blocks of NGRX step by step<\/h2>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"NgRx
Source: https:\/\/ngrx.io\/<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Store<\/h3>\n\n\n\n

The Store <\/strong>is a controlled state container designed to help write performant and escalable applications on top of Angular.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Effects<\/h3>\n\n\n\n

The Effects <\/strong>use streams to provide new sources<\/a> of actions. To modify state based on external interactions such as network requests, web socket messages and time-based events. So they are the prefered method to fetch data and to keep some of the application logic.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Selectors<\/h3>\n\n\n\n

The Selectors are pure functions used for obtaining slices of store state. So they select pieces of information from the Store be be consumed by other parts of the application logic.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Reducers<\/h3>\n\n\n\n

The Reducers in NgRx are responsible for handling transitions from one state to the next state in your application. Reducer functions handle these transitions by determining which actions<\/a> to handle based on the action’s type. In other words, they receive actions with a data payload and the change the state storing the new data as desired.<\/p>\n\n\n\n

After understanding basic building blocks of NGRX State Management, now we are going to build an example small chat app with NGRX State Management. <\/p>\n\n\n\n

Since, we already have created a chat app earlier In previous post here <\/a>. As a result, we are going to introduce the NGRX State management in it for updating the UI while SENDING \/ RECEIVING the message.<\/p>\n\n\n\n

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

1. Setup the Project<\/h2>\n\n\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\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
2. Install NGRX Dependencies<\/h2>\n\n\n\n
ng add @ngrx\/store @ngrx\/effects @ngrx\/component<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
3. Create Actions<\/h2>\n\n\n\n
Here, We will create 4 actions that are necessary to manage the state of the chat app.<\/p>\n\n\n\n
File<\/strong>: store\/actions\/actions.ts<\/p>\n\n\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\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
4. Create Effects<\/h2>\n\n\n\n
Effects <\/strong>provide a way to interact with those services and isolate them from the components.<\/p>\n\n\n\n
Usage<\/h3>\n\n\n\n
Effects are useful, If you want to handle tasks such as fetching data, long-running tasks that produce multiple events, and other external interactions.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Note:<\/strong> To remember,  In most scenarios, it will dispatch action(s), But it is not compulsory to always dispatch action(s). <\/p>\n\n\n\n
To write effects without dispatching the action(s), pass 2nd parameter to createEffect()<\/strong><\/em><\/code> functions with { dispatch: false }<\/em><\/strong><\/code><\/p>\n\n\n\n
File:<\/strong> state\/effects\/effects.ts<\/p>\n\n\n\n
<\/p>\n\n\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\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
5. Create Reducers<\/h2>\n\n\n\n
Each reducer function takes the latest Action<\/a><\/code> dispatched, the current state, and determines whether to return a newly modified state or the original state.  Now, in the following example we’ll guide you on how to write reducer functions, register them in your Store<\/a><\/code>, and compose feature states.<\/p>\n\n\n\n
File:<\/strong> store\/reducers\/reducers.ts<\/p>\n\n\n\n
<\/p>\n\n\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\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
6. Create Selectors<\/h2>\n\n\n\n
The selector that we have created here will return the observable <\/strong>of all the messages<\/p>\n\n\n\n
File:<\/strong> store\/selectors\/selectors.ts<\/p>\n\n\n\n
<\/p>\n\n\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\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
7. Manage the State<\/h2>\n\n\n\n
In this section, We are going to see which are all the events where we need to update the state:<\/p>\n\n\n\n