> Markdown version of [/videos/365-ngrx-tips-for-future-proof-angular-apps](https://www.wearedevelopers.com/videos/365-ngrx-tips-for-future-proof-angular-apps). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# NgRx Tips for Future-Proof Angular Apps

Marco Rovic reveals how to build future-proof Angular apps by mastering strict NgRx action hygiene. Ditch cumbersome facades and use advanced practices to keep your architecture perfectly predictable.

- **Speakers:** Marko Stanimirović
- **Event:** WeAreDevelopers LIVE
- **Published:** March 9, 2022
- **Duration:** 26:58
- **URL:** https://www.wearedevelopers.com/videos/365-ngrx-tips-for-future-proof-angular-apps

## Summary

Marco Rovic presents a comprehensive guide to building resilient, maintainable Angular applications by applying advanced best practices to the @ngrx/store and @ngrx/effects packages. Centralizing global state entirely within the NgRx store eliminates the need for cumbersome facade layers and disjointed stateful services. By leveraging selectors to handle derived state rather than storing computed values directly in reducers, developers can prevent state bloat and keep application updates strictly predictable. Furthermore, aggregating multiple state slices into view model selectors significantly reduces container component complexity, requiring only a single asynchronous template subscription to render complex data views. Adopting strict "good action hygiene" is critical for debugging and architecture; this involves transforming actions into unique source-based events rather than chaining generic commands, which makes Redux DevTools logs instantly readable without inspecting the source code. When dealing with side effects, naming them declaratively like functions ensures strict adherence to the open-closed principle. To build future-proof applications, developers should shift complex HTTP protocols and mapping logic into dedicated services to keep effects simple and testable, while returning single success events instead of arrays of sequential actions to allow multiple downstream reducers to react efficiently.

**Keywords:** ngrx store best practices, ngrx effects handling, angular state management, rxjs derived state, view model selectors, good action hygiene, event sourcing patterns, angular component architecture, angular service refactoring, redux devtools debugging, open closed principle, global state centralization, async pipe optimization, ngrx reducer patterns

## Chapters

1. **Consolidating global state in a single store** (00:30) — Avoid splitting state between services and the store by maintaining a single source of truth for global data.
1. **Calculating derived state with specialized store selectors** (05:30) — Combine existing state properties into dedicated selectors to avoid persisting redundant state values within the store.
1. **Simplifying container components with view model selectors** (07:48) — Bundle multiple state slices into a single view model object to reduce component boilerplate and template subscriptions.
1. **Creating reusable case reducers for identical state changes** (10:13) — Group actions that require identical mutations into a single case reducer rather than adding conditional logic within existing handlers.
1. **Treating store actions as unique application events** (11:28) — Dispatch distinct actions representing explicit user interactions to prevent sequential executions and clarify debugging logs.
1. **Organizing ngrx action files by component source** (15:03) — Group structural actions originating from the same feature page or service to maintain a predictable codebase architecture.
1. **Naming ngrx effects to reflect functional responsibilities** (16:42) — Assign behavior-based names to effects rather than mimicking action types to support open-closed architectural principles.
1. **Simplifying effects by delegating logic to dedicated services** (18:14) — Extract complex data fetching and mapping logic from effects into dedicated services to improve clarity and testing.
1. **Eliminating boilerplate effects by combining action listeners** (20:34) — Merge similar action listeners directly into single effect pipelines to prevent dispatching unnecessary internal action commands.
1. **Returning single payload actions from successful data effects** (21:51) — Return single, aggregated success actions from effects instead of yielding arrays of isolated store updates.
1. **Angular framework benefits and technical career backgrounds** (24:18) — Insights into preferring Angular for its native reactive programming model alongside reflections on early engineering careers.

## Related Moments

- [Integrating the NgRx architecture for global state management](https://www.wearedevelopers.com/videos/685-angular-unleashed-mastering-modern-web-development-with-angular) (from "Angular Unleashed: Mastering Modern Web Development with Angular")
- [Understanding the NgRx state management flow](https://www.wearedevelopers.com/videos/82-hello-generics-goodbye-boilerplate) (from "Hello generics, goodbye boilerplate!")
- [Refactoring NgRx effects using generic creators](https://www.wearedevelopers.com/videos/82-hello-generics-goodbye-boilerplate) (from "Hello generics, goodbye boilerplate!")
- [Orchestrating complex reactive state logic with the NgRx SignalStore](https://www.wearedevelopers.com/videos/1682-client-side-state-management-reimagined-think-outside-the-box) (from "Client-Side State Management Reimagined – Think Outside the Box")
- [Exploring Angular component patterns and upcoming framework updates](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Identifying and reducing boilerplate in NgRx actions](https://www.wearedevelopers.com/videos/82-hello-generics-goodbye-boilerplate) (from "Hello generics, goodbye boilerplate!")

## Related Articles

- [Next.js App Router: Explained](https://www.wearedevelopers.com/magazine/387-next-js-app-router-explained)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**