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…