{"id":1575,"date":"2023-10-04T05:00:00","date_gmt":"2023-10-04T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1575"},"modified":"2023-09-27T11:28:29","modified_gmt":"2023-09-27T18:28:29","slug":"state-management-effect","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/state-management-effect\/","title":{"rendered":"State Management: Effect"},"content":{"rendered":"\n

Let’s get back to our series on state management<\/a> with this post. So far, we covered that state management libraries give us a global State that gets updated using Actions and Reducers. I haven’t told you yet that typical Redux Reducer functions are meant to be synchronous. In other words, you’re not supposed to make an HTTP request or anything asynchronous in a reducer.<\/p>\n\n\n\n

So, how do we implement asynchronous tasks? This is known as a side-effect<\/a> (because it involves a third party such as a server) or just Effect.<\/p>\n\n\n\n

When we use Effects, the idea is to have an Action that triggers the Effect, and once the Effect completes, another Action is triggered:<\/p>\n\n\n\n

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

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

For instance, in our current switcher example, we could have an Action called LOAD_EXCHANGE_RATES<\/code>. This Action would trigger an Effect to make an HTTP request and fetch exchange rates from an API. For instance, the original Action would also update the State to make it a “loading” state.<\/p>\n\n\n\n

Then, once the HTTP request completes, the Effect would dispatch another action, EXCHANGE_RATES_LOADED<\/code> and pass the data as its payload so it gets stored in the State. <\/p>\n\n\n\n

Effects are implemented differently based on the state management library<\/h3>\n\n\n\n
    \n
  1. NgRx<\/strong><\/li>\n<\/ol>\n\n\n\n

    NgRx effects<\/a> rely heavily on RxJs and look like this:<\/p>\n\n\n\n

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

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

    As you can see, the Effect code is verbose, but every single step makes sense: We turn an action into an asynchronous request that dispatches other Actions upon success or failure.<\/p>\n\n\n\n

    If you want to learn more about NgRx, I have this video course on LinkedIn Learning<\/a>.<\/p>\n\n\n\n

    2. NgXs<\/strong><\/p>\n\n\n\n

    NgXs has a different approach and doesn’t have effects. Instead, all actions have four states by default<\/a>:<\/p>\n\n\n

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

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

    As a result, action handlers (reducers) can use asynchronous requests without needing any effects:<\/p>\n\n\n\n

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

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

    As you can see, even if the Redux concepts remain the same, every state management library has a different approach. I like NgXs because of its simplicity. The code is more to the point and less reliant on RxJs operators<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Let’s get back to our series on state management with this post. So far, we covered that state management libraries give us a global State that gets updated using Actions and Reducers. I haven’t told you yet that typical Redux Reducer functions are meant to be synchronous. In other words, you’re not supposed to make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-1575","post","type-post","status-publish","format-standard","hentry","category-state-management"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1575","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=1575"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1575\/revisions"}],"predecessor-version":[{"id":1586,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1575\/revisions\/1586"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}