Sharing Top Content from the Angular-sphere.

Splitter and Aggregation patterns for ngrx/effects. By @_VamsiVempati_

  • Most of the time we fire a single action and expect one effect to call an api endpoint, and update the store with the response.
  • The event flow would be: – User interaction happensEffect makes the calls to the APIsWith the response from the APIs, the store is updated and feedback is given to the userDifferent ways of solving and GetShippingInformationAction are the 2 actions that make the API and provide the response from the…
  • Because, GetProductInformationAction and GetShippingInformationAction are quite generic, meaning they could have been triggered by other processes in the application too and could contain stale data.Also, GetProductSummaryAction could have been triggered multiple times and we do not have any logic to find out the actions and store updates that are correlated.This…
  • Let us say, upon successful API call to get product information, we dispatch GotProductInformationAction and similarly for shipping information we dispatch complete our chain of actions, we wait for GotProductInformationAction and GotShippingInformationAction, aggregate them both and then dispatch the splitter and aggregation pattern, our action flow would look like below:…
  • So the effect would now look something like below: – In case of any errors when we try to get either product information or the shipping information from the API, we dispatch we need to somehow know when these actions are finished and all of the information is available, so…

I work on a large Angular app that uses @ngrx/store for our state management and @ngrx/effects for handling side effects. Most of the time we fire a single action and expect one effect to call an api…

Angular – Splitter and Aggregation patterns for ngrx/effectsI work on a large Angular app that uses @ngrx/store for our state management and @ngrx/effects for handling side effects. Most of the time we fire a single action and expect one effect to call an api endpoint, and update the store with the response. However, sometimes a user interaction requires us to wait for responses from more than one API endpoint before we update the store and the UI.

Effects in ngrx usually only react to single actions (via the .ofType operator), but if we send out two API calls we need an effect that reacts to two (success) actions. This raises a more fundamental design question: How can we orchestrate multiple actions (bring them in the right order, wait for all of them to finish, etc.) and after that continue with the remainder of the effect.

For example, consider we have an online clothing shop with various products like pants, t-shirts, shorts, etc. and we are viewing a product, say a t-shirt. Product information will include both information about the product such as color, size, etc. and about the shipping options. The product information and shipping information are available from two different APIs and we are unable to change the API so it returns all the information we need in a single API call.

For this example, we update the product summary in the store only when we have information about both the product and the…

Angular