{"id":48,"date":"2018-05-01T07:37:25","date_gmt":"2018-05-01T07:37:25","guid":{"rendered":"http:\/\/eternalsoft.in\/eternalsite\/blogv\/?p=48"},"modified":"2026-04-11T03:01:47","modified_gmt":"2026-04-10T21:31:47","slug":"state-management-angular-using-ngrx","status":"publish","type":"post","link":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/","title":{"rendered":"Setup ngrx for state management in your Angular application"},"content":{"rendered":"<p>We will discuss about state management for Angular applications. This article is for intermediate leve&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We will discuss about state management for Angular applications. This article is for intermediate leve&#8230;<\/p>\n","protected":false},"author":1,"featured_media":75,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js-angularjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.6 (Yoast SEO v25.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>NgRx State Management in Angular: Setup Guide | Eternal Web<\/title>\n<meta name=\"description\" content=\"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions &amp; Effects with practical examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setup ngrx for state management in your Angular application\" \/>\n<meta property=\"og:description\" content=\"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions &amp; Effects with practical examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\" \/>\n<meta property=\"og:site_name\" content=\"Eternal Web Pvt Ltd\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/eternalsoftsolutions\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/EternalWebPvtLtd\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-01T07:37:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-10T21:31:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nirav Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EternalSoft\" \/>\n<meta name=\"twitter:site\" content=\"@eternalsoftsolutions\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nirav Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\"},\"author\":{\"name\":\"Nirav Shah\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/bd43ac14d2e9276ef3ab45a098d0f250\"},\"headline\":\"Setup ngrx for state management in your Angular application\",\"datePublished\":\"2018-05-01T07:37:25+00:00\",\"dateModified\":\"2026-04-10T21:31:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\"},\"wordCount\":24,\"publisher\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png\",\"articleSection\":[\"Node.JS AngularJS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\",\"name\":\"NgRx State Management in Angular: Setup Guide | Eternal Web\",\"isPartOf\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png\",\"datePublished\":\"2018-05-01T07:37:25+00:00\",\"dateModified\":\"2026-04-10T21:31:47+00:00\",\"description\":\"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions & Effects with practical examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png\",\"contentUrl\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png\",\"width\":360,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setup ngrx for state management in your Angular application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#website\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/\",\"name\":\"Eternal Web Pvt Ltd\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization\",\"name\":\"Eternal Web Pvt Ltd\",\"alternateName\":\"Eternal Web\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2020\/05\/blog-logo-image.png\",\"contentUrl\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2020\/05\/blog-logo-image.png\",\"width\":360,\"height\":260,\"caption\":\"Eternal Web Pvt Ltd\"},\"image\":{\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/eternalsoftsolutions\",\"https:\/\/x.com\/eternalsoftsolutions\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/bd43ac14d2e9276ef3ab45a098d0f250\",\"name\":\"Nirav Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4bf5efd1b095403a75e5a25b49ab47c2?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4bf5efd1b095403a75e5a25b49ab47c2?s=96&r=g\",\"caption\":\"Nirav Shah\"},\"description\":\"Nirav Shah is the Director of Eternal Web Pvt Ltd, an AWS Advanced Consulting Partner and certified Odoo Partner based in the UK. With over a decade of experience in cloud computing, digital transformation, and ERP implementation, Nirav helps enterprises adopt the right technology to solve complex business challenges. He specialises in AWS infrastructure, Odoo ERP, and web development solutions for businesses across the UK and beyond.\",\"sameAs\":[\"https:\/\/www.facebook.com\/EternalWebPvtLtd\/\",\"https:\/\/www.linkedin.com\/company\/eternal-web-private-limited\/\",\"https:\/\/x.com\/EternalSoft\"],\"award\":[\"AWS Advanced Consulting Partner - 2024\",\"Odoo Certified Partner\"],\"knowsAbout\":[\"AWS\",\"Cloud Computing\",\"Odoo ERP\",\"Digital Transformation\",\"Web Development\",\"Cloud Infrastructure\",\"ERP Implementation\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Director\",\"worksFor\":\"Eternal Web Pvt Ltd\",\"url\":\"https:\/\/www.eternalsoftsolutions.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"NgRx State Management in Angular: Setup Guide | Eternal Web","description":"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions & Effects with practical examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/","og_locale":"en_US","og_type":"article","og_title":"Setup ngrx for state management in your Angular application","og_description":"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions & Effects with practical examples.","og_url":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/","og_site_name":"Eternal Web Pvt Ltd","article_publisher":"https:\/\/www.facebook.com\/eternalsoftsolutions","article_author":"https:\/\/www.facebook.com\/EternalWebPvtLtd\/","article_published_time":"2018-05-01T07:37:25+00:00","article_modified_time":"2026-04-10T21:31:47+00:00","og_image":[{"width":360,"height":260,"url":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png","type":"image\/png"}],"author":"Nirav Shah","twitter_card":"summary_large_image","twitter_creator":"@EternalSoft","twitter_site":"@eternalsoftsolutions","twitter_misc":{"Written by":"Nirav Shah","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#article","isPartOf":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/"},"author":{"name":"Nirav Shah","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/bd43ac14d2e9276ef3ab45a098d0f250"},"headline":"Setup ngrx for state management in your Angular application","datePublished":"2018-05-01T07:37:25+00:00","dateModified":"2026-04-10T21:31:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/"},"wordCount":24,"publisher":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png","articleSection":["Node.JS AngularJS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/","name":"NgRx State Management in Angular: Setup Guide | Eternal Web","isPartOf":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage"},"image":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png","datePublished":"2018-05-01T07:37:25+00:00","dateModified":"2026-04-10T21:31:47+00:00","description":"Learn how to set up NgRx for state management in Angular. Step-by-step guide covering Store, Reducers, Actions & Effects with practical examples.","breadcrumb":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#primaryimage","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png","contentUrl":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2018\/05\/Angular2-@ngrx.png","width":360,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/state-management-angular-using-ngrx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eternalsoftsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Setup ngrx for state management in your Angular application"}]},{"@type":"WebSite","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#website","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/","name":"Eternal Web Pvt Ltd","description":"","publisher":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eternalsoftsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#organization","name":"Eternal Web Pvt Ltd","alternateName":"Eternal Web","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2020\/05\/blog-logo-image.png","contentUrl":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-content\/uploads\/2020\/05\/blog-logo-image.png","width":360,"height":260,"caption":"Eternal Web Pvt Ltd"},"image":{"@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/eternalsoftsolutions","https:\/\/x.com\/eternalsoftsolutions"]},{"@type":"Person","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/bd43ac14d2e9276ef3ab45a098d0f250","name":"Nirav Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eternalsoftsolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4bf5efd1b095403a75e5a25b49ab47c2?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4bf5efd1b095403a75e5a25b49ab47c2?s=96&r=g","caption":"Nirav Shah"},"description":"Nirav Shah is the Director of Eternal Web Pvt Ltd, an AWS Advanced Consulting Partner and certified Odoo Partner based in the UK. With over a decade of experience in cloud computing, digital transformation, and ERP implementation, Nirav helps enterprises adopt the right technology to solve complex business challenges. He specialises in AWS infrastructure, Odoo ERP, and web development solutions for businesses across the UK and beyond.","sameAs":["https:\/\/www.facebook.com\/EternalWebPvtLtd\/","https:\/\/www.linkedin.com\/company\/eternal-web-private-limited\/","https:\/\/x.com\/EternalSoft"],"award":["AWS Advanced Consulting Partner - 2024","Odoo Certified Partner"],"knowsAbout":["AWS","Cloud Computing","Odoo ERP","Digital Transformation","Web Development","Cloud Infrastructure","ERP Implementation"],"knowsLanguage":["English"],"jobTitle":"Director","worksFor":"Eternal Web Pvt Ltd","url":"https:\/\/www.eternalsoftsolutions.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":16,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":6673,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions\/6673"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/media\/75"}],"wp:attachment":[{"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eternalsoftsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}