{"id":1510,"date":"2023-09-26T05:00:00","date_gmt":"2023-09-26T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1510"},"modified":"2023-09-22T16:01:08","modified_gmt":"2023-09-22T23:01:08","slug":"state-management-state-and-store","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/state-management-state-and-store\/","title":{"rendered":"State Management: State and Store"},"content":{"rendered":"\n

After introducing state management<\/a> concepts last week, let’s dive deeper and get into two essential concepts of state management libraries: Store<\/a> and State<\/a>. I’m using NgXs<\/a> for these examples because the library’s syntax is the most straightforward and consistent with how Angular works, using Typescript decorators to configure the different classes.<\/p>\n\n\n\n

The example we will be using is an online store<\/a> where the user can change the currency and see the different prices get updated as a result:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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

We want to manage that currency and the exchange rate that goes with it using state management. The first step is to create a piece of State that handles that data – and provide a name and default value for it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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

The above State has to be registered with the NgxsModule<\/code> in our AppModule<\/code> as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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

And that’s it! Now, to interact with that State, we can use the Store<\/a><\/code> service and inject it wherever we need it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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

Of course, you can create multiple pieces of State for your application using the same approach as above. Every new part of our State gets added as a property to the global state<\/code> object. For instance, our current currency information can be found at state.currencyInfo<\/code>. If we add a new State<\/code> with a name set to cartContents<\/code>, its data would be accessible under state.cartContents<\/code>.<\/p>\n\n\n\n

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

In the next post of this series, we’ll see how to use Actions<\/a> to update the application’s State. You can see that example in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

After introducing state management concepts last week, let’s dive deeper and get into two essential concepts of state management libraries: Store and State. I’m using NgXs for these examples because the library’s syntax is the most straightforward and consistent with how Angular works, using Typescript decorators to configure the different classes. The example we will […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,37],"tags":[],"class_list":["post-1510","post","type-post","status-publish","format-standard","hentry","category-ngxs","category-state-management"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1510"}],"version-history":[{"count":7,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1510\/revisions"}],"predecessor-version":[{"id":1547,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1510\/revisions\/1547"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}