{"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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t