WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 9, 2022

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

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.

Pause
Mute Enter Fullscreen
#1 about 5 min

Consolidating global state in a single store

Avoid splitting state between services and the store by maintaining a single source of truth for global data.

#2 about 3 min

Calculating derived state with specialized store selectors

Combine existing state properties into dedicated selectors to avoid persisting redundant state values within the store.

#3 about 3 min

Simplifying container components with view model selectors

Bundle multiple state slices into a single view model object to reduce component boilerplate and template subscriptions.

#4 about 2 min

Creating reusable case reducers for identical state changes

Group actions that require identical mutations into a single case reducer rather than adding conditional logic within existing handlers.

#5 about 4 min

Treating store actions as unique application events

Dispatch distinct actions representing explicit user interactions to prevent sequential executions and clarify debugging logs.

#6 about 2 min

Organizing ngrx action files by component source

Group structural actions originating from the same feature page or service to maintain a predictable codebase architecture.

#7 about 2 min

Naming ngrx effects to reflect functional responsibilities

Assign behavior-based names to effects rather than mimicking action types to support open-closed architectural principles.

#8 about 3 min

Simplifying effects by delegating logic to dedicated services

Extract complex data fetching and mapping logic from effects into dedicated services to improve clarity and testing.

#9 about 2 min

Eliminating boilerplate effects by combining action listeners

Merge similar action listeners directly into single effect pipelines to prevent dispatching unnecessary internal action commands.

#10 about 3 min

Returning single payload actions from successful data effects

Return single, aggregated success actions from effects instead of yielding arrays of isolated store updates.

#11 about 3 min

Angular framework benefits and technical career backgrounds

Insights into preferring Angular for its native reactive programming model alongside reflections on early engineering careers.

Matching moments

7:21 min

Integrating the NgRx architecture for global state management

Indu Chaube · LIVE

2:18 min

Understanding the NgRx state management flow

Miroslav Jonaš · LIVE

6:28 min

Refactoring NgRx effects using generic creators

Miroslav Jonaš · LIVE

5:06 min

Orchestrating complex reactive state logic with the NgRx SignalStore

Michael Egger-Zikes Michael Egger-Zikes · WWC 2025

8:34 min

Exploring Angular component patterns and upcoming framework updates

Benedikt Starzengruber · LIVE

2:11 min

Identifying and reducing boilerplate in NgRx actions

Miroslav Jonaš · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare

Related videos

Hello generics, goodbye boilerplate! thumbnail
42:16
LIVE • over 5 years ago

Hello generics, goodbye boilerplate!

Miroslav Jonaš

Client-Side State Management Reimagined – Think Outside the Box thumbnail
29:54
WWC 2025 • 12 months ago

Client-Side State Management Reimagined – Think Outside the Box

Michael Egger-Zikes

Angular tips/tricks you can use from tomorrow on thumbnail
50:28
LIVE • over 4 years ago

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Practice makes perfect - when it comes to RxJS thumbnail
33:25
LIVE • about 6 years ago

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

Sustainable Angular Architectures with Nx and Strategic Design thumbnail
50:57
LIVE • about 6 years ago

Sustainable Angular Architectures with Nx and Strategic Design

Manfred Steyer

Angular Unleashed: Mastering Modern Web Development with Angular thumbnail
58:56
LIVE • almost 3 years ago

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.