{"id":1558,"date":"2023-10-02T05:00:00","date_gmt":"2023-10-02T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1558"},"modified":"2023-09-26T14:37:51","modified_gmt":"2023-09-26T21:37:51","slug":"state-management-selector","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/state-management-selector\/","title":{"rendered":"State Management: Selector"},"content":{"rendered":"\n

We know how to create a State<\/a> and dispatch actions to update its value. Now let’s see how to receive updates when the State gets updated.<\/p>\n\n\n\n

Most state management libraries provide what is known as Selectors<\/a>. A Selector query function runs against our State and returns an Observable. For instance, with NgXs, a Selector can be created with the @Select<\/code> decorator<\/a> as follows:<\/p>\n\n\n

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

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

The above code creates an Observable that returns any value update in state.currencyInfo<\/code>. If you don’t like decorators, you can also use the select<\/code> function from the Store service:<\/p>\n\n\n\n

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

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

Both options return a similar Observable. If a Selector of a slice of your State is used repeatedly, you can make it a memoized selector<\/a> by using the @Selector<\/code> decorator in your State class. This example creates a new selector that returns just the currency property of our State:<\/p>\n\n\n

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

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

Such a Selector can be used with @Select decorator in your components\/services as follows:<\/p>\n\n\n

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

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

You can see that code in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

We know how to create a State and dispatch actions to update its value. Now let’s see how to receive updates when the State gets updated. Most state management libraries provide what is known as Selectors. A Selector query function runs against our State and returns an Observable. For instance, with NgXs, a Selector can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,38,37],"tags":[],"class_list":["post-1558","post","type-post","status-publish","format-standard","hentry","category-angular","category-ngxs","category-state-management"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1558","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=1558"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1558\/revisions"}],"predecessor-version":[{"id":1564,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1558\/revisions\/1564"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}