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 · World Congress 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

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
6 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
7 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
13 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
14 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
19 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
20 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

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

September 25, 2026 · 11:00–11:30

Stage 7

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

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 25, 2026 · 12:20–12:50

Stage 9

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

September 24, 2026 · 11:40–12:10

Stage 4

Taming Rogue Agents: Observability-Driven Evaluation for Production Reliability

Anagha Rumade, Anjana Umapathy, Apoorva Jaiswal

Anagha Rumade
Anjana Umapathy
Apoorva Jaiswal

Related videos

Hello generics, goodbye boilerplate! thumbnail
42:16
LIVE • almost 6 years ago

Hello generics, goodbye boilerplate!

Miroslav Jonaš

Client-Side State Management Reimagined – Think Outside the Box thumbnail
29:54
World Congress 2025 • about 1 year 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 • over 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 • over 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.