{"id":176,"date":"2019-09-18T09:20:39","date_gmt":"2019-09-18T09:20:39","guid":{"rendered":"https:\/\/www.samarthya.me\/wps\/?p=176"},"modified":"2019-09-30T07:44:31","modified_gmt":"2019-09-30T07:44:31","slug":"ngrx-state-management-for-angular","status":"publish","type":"post","link":"https:\/\/blog.samarthya.me\/wps\/2019\/09\/18\/ngrx-state-management-for-angular\/","title":{"rendered":"NGRX – State management for Angular."},"content":{"rendered":"

Inspired by Redux, Store is RxJS powered state management for Angular applications. Store is a container for state of the application.<\/p>\n

Refer to documentation at – https:\/\/ngrx.io\/guide\/store<\/a><\/p><\/blockquote>\n

Key components<\/h2>\n

I have a sample application posted at https:\/\/www.github.com<\/a><\/p>\n

Actions<\/h3>\n

Unique events generated from components and services.<\/p>\n

#v8 Onwards\r\nexport const login = createAction('[Login Initiatied] Login',\r\n\u00a0\u00a0props<{ principal: IPrincipal }>()\r\n)<\/pre>\n
\n
#Older way of creating actions is still valid.\r\nimport\u00a0{\u00a0Action\u00a0}\u00a0from\u00a0'@ngrx\/store';\r\n\r\nexport\u00a0class\u00a0Login\u00a0implements\u00a0Action\u00a0{\r\n\u00a0\u00a0readonly\u00a0type\u00a0=\u00a0'[Login\u00a0Page]\u00a0Login';\r\n \u00a0constructor(public principal: IPrincipal) {}\r\n}<\/pre>\n<\/div>\n
You can dispatch an action like below<\/p>\n
\n
\n
import\u00a0*\u00a0as\u00a0appActions\u00a0from\u00a0'..\/actions\/login.action';<\/pre>\n<\/div>\n
principal = {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email:\u00a0this.username.value,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0password:\u00a0this.password.value\r\n\u00a0\u00a0\u00a0\u00a0};\r\n\r\nthis.store.dispatch(appActions.login({ principal }));<\/pre>\n<\/div>\n
Example Actions<\/h4>\n
\"Action-Reducer-State\"<\/p>\n
\n
export\u00a0const\u00a0login\u00a0=\u00a0createAction('[Login\u00a0Initiatied]\u00a0Login',\r\n\u00a0\u00a0props<{\u00a0principal:\u00a0IPrincipal\u00a0}>()\r\n);\r\n\r\nexport\u00a0const\u00a0loginSuccess\u00a0=\u00a0createAction('[Login\u00a0Success]\u00a0Login',\r\n\u00a0\u00a0props<{\u00a0userProfile:\u00a0IUserProfile\u00a0}>()\r\n);\r\n\r\nexport\u00a0const\u00a0loginFailure\u00a0=\u00a0createAction('[Login\u00a0Failure]\u00a0Login',\r\n\u00a0\u00a0props<{\u00a0message:\u00a0any\u00a0}>()\r\n);\r\n\r\nexport\u00a0const\u00a0logout\u00a0=\u00a0createAction('[Logout\u00a0initiated]\u00a0logout', \r\nprops<{\u00a0userName:\u00a0string}>()\r\n);<\/pre>\n<\/div>\n
Reducers<\/h3>\n
Pure functions that manipulate the state.<\/p>\n
\n
const\u00a0loginReducer\u00a0=\r\n\u00a0\u00a0createReducer(\r\n\u00a0\u00a0\u00a0\u00a0null,\r\n\u00a0\u00a0\u00a0\u00a0on(LoginActions.login,\u00a0(state,\u00a0{\u00a0principal\u00a0})\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0loggedIn:\u00a0false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0userProfile:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0user:\u00a0principal,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0details:\u00a0null,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0profile:\u00a0null\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0}),\r\n.\r\n.\r\n.<\/pre>\n
Selectors<\/h3>\n
Selectors are pure functions to select, derive, compose pieces of state.<\/p>\n
\n
export\u00a0const\u00a0selectTheState\u00a0=\u00a0createSelector(selectState,\u00a0state\u00a0=>\u00a0state);<\/pre>\n
\"Flow<\/a>
Flow of state<\/figcaption><\/figure>\n<\/div>\n
Example<\/h2>\n
Installation<\/h3>\n
In my sample application my pacakge.json looks something like this for NGRX specific libraries<\/p>\n
\n
\"@ngrx\/effects\":\u00a0\"^8.2.0\",\r\n\"@ngrx\/router-store\": \"^8.2.0\",\r\n\"@ngrx\/store\": \"^8.2.0\",\r\n\"@ngrx\/store-devtools\": \"^8.2.0\",<\/pre>\n<\/div>\n
One has to first install the basic store<\/p>\n<\/div>\n
npm install <\/span>@ngrx<\/span>\/<\/span>store <\/span>--<\/span>save<\/span><\/code><\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Inspired by Redux, Store is RxJS powered state management for Angular applications. Store is a container for state of the application. Refer to documentation at – https:\/\/ngrx.io\/guide\/store Key components I have a sample application posted at https:\/\/www.github.com Actions Unique events generated from components and services. #v8 Onwards export const login = createAction(‘[Login Initiatied] Login’, \u00a0\u00a0props<{ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-personal"],"_links":{"self":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":0,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}