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

Now that we’ve covered what’s the global State<\/a><\/code> and what’s the Store<\/a><\/code> service, let’s take a look at how we can update that State<\/code>. In our introduction to state management<\/a>, we introduced Actions.<\/p>\n\n\n\n

Actions<\/a> are simple objects with a name\/type describing what we’re trying to do. An optional payload contains the parameters for that Action. In our example of currency switcher, we want to change a currency, so we would create the following Action, where the payload is the new currency:<\/p>\n\n\n

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

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

The above Action does absolutely nothing on its own. We need a reducer to implement the corresponding state transition. With NgXs, a reducer is a method with the decorator @Action<\/code> in our State class: <\/p>\n\n\n\n

<\/p>\n\n\n

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

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

In the above code, we define which method runs when the Action of type ChangeCurrency<\/code> is dispatched to our state management library.<\/p>\n\n\n\n

That method takes the current State, creates a copy of it (this is a core principle of Redux<\/a>), and then changes the currency<\/code> and exchangeRate<\/code> in the new state object.<\/p>\n\n\n\n

Then, NgXs will automatically notify any component\/service\/directive subscribed to that State that a new value has been set.<\/p>\n\n\n\n

How to dispatch an action?<\/h3>\n\n\n\n

If we want to use the Action and Reducer created earlier, we use the only object that knows about everything in our state-management machinery: The Store<\/a>.<\/p>\n\n\n\n

Conveniently enough, our Store has a dispatch<\/code> method that can be used for any Action:<\/p>\n\n\n

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

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

As a reminder, the Store is a service that can be injected anywhere we need it:<\/p>\n\n\n

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

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

We’ve covered most of the pieces of our state management architecture. We know how to create a State, an Action, a Reducer and use the Store to dispatch an action and update our State:<\/p>\n\n\n

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

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

In our next post in this series, we’ll see how to Select and subscribe to specific parts of our State. You can see that example in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Now that we’ve covered what’s the global State and what’s the Store service, let’s take a look at how we can update that State. In our introduction to state management, we introduced Actions. Actions are simple objects with a name\/type describing what we’re trying to do. An optional payload contains the parameters for that Action. […]<\/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-1535","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\/1535","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=1535"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"predecessor-version":[{"id":1548,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1535\/revisions\/1548"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}