NgRx Tips for Future-Proof Angular Apps

Are your NgRx actions making your app harder to debug? Learn how good action hygiene can future-proof your state management and simplify your Angular application.

#1about 4 minutes

Consolidate global state into a single NgRx store

Avoid splitting global state between NgRx and stateful services to improve reusability and reduce component dependencies.

#2about 2 minutes

Use selectors to compute derived state on demand

Calculate derived data using memoized selectors instead of storing it in the state to simplify reducers and reduce state size.

#3about 2 minutes

Simplify components with view model selectors

Combine multiple state slices into a single view model selector to simplify component logic and template bindings.

#4about 1 minute

Create reusable and maintainable case reducers

Handle multiple actions in a single case reducer for shared logic, but split them into separate reducers when state changes diverge.

#5about 4 minutes

Treat actions as unique events, not commands

Use the source-event pattern to name actions descriptively, avoiding sequential dispatches and improving application traceability.

#6about 2 minutes

Organize actions by grouping them by source

Structure your codebase by creating dedicated action files for each source, such as pages, APIs, or guards.

#7about 1 minute

Name NgRx effects based on their function

Name effects based on the task they perform rather than the action they listen to, improving readability and maintainability.

#8about 2 minutes

Keep effects simple by moving logic to services

Isolate complex business logic within services and call them from effects to keep the effects simple, readable, and easy to test.

#9about 1 minute

Avoid creating unnecessary boilerplate effects

Eliminate intermediate effects by having the primary effect listen to multiple source actions directly, reducing boilerplate code.

#10about 2 minutes

Apply good action hygiene within NgRx effects

Return a single unique event with a complete data payload from an effect instead of an array of command actions to decouple state updates.

#11about 3 minutes

Adopting NgRx best practices for future-proof apps

Following established best practices for NgRx store and effects improves code quality, maintainability, and performance in large Angular applications.

From learning to earning

Jobs that call for the skills explored in this talk.