NgRx is a powerful library
used to manage Angular application state

NgRx allows you to manage Angular application state using robust predictable and repeatable patterns that increase developer productivity and application maintainability while preventing troublesome bugs caused by inconsistent state.

Title 📸 by Gabriel Sollmann

“

You’re already using
Angular to manage your views,
why not maintain the same
structured approach
for your application state ?

Best in category

With over a decade of battle-testing, hands-on use and feedback by countless developers worldwide , NgRx remains the best tool for implementing one-way data flow pattern and clear separation of concerns between read, update and side-effects elements of application logic.

Streamlined architecture

Its architecture simplifies development by splitting problems into the read and update halves of logic in question making development twice as simple.

Though it’ll feel even more so by enabling you to focus on one half of a problem at a time .

As simple as it gets

The genius of NgRx API design means 80% of implementation consists of pure functions that are the simplest thing to write, understand and test.

The remaining 20% consists of tamed RxJs streams implemented in standardized NgRx side-effects.

Tailored for enterprises

Most enterprise applications are variations of standard CRUD , which hide behind custom business flows and rarely face truly unique challenges.

These applications are ideally suited for standardized, optimized solutions like NgRx!

Use NgRx for every non-trivial Angular application
to manage state without a headache

Ad hoc state management of Angular applications leads to predictable problems that are a nightmare to fix once established. Full rewrites are an expensive solution to escaping the tangled web of state managed by ad hoc services and there’s no guarantee it’ll work next time around…

Duplicate state
Duplicated state 😉

With no standardized state management solution, developers split and store state across multiple locations in components and services. Such state accumulates overlaps, duplications and must be manually synchronized.

It is more productive to embrace a single source of truth pattern implemented in a centralized state store just like NgRx offers.

Manual state
synchronization

Manual state synchronization represents major overhead. Increased state duplication demands that more synchronization logic is introduced and maintained.

Incorrect or excessive synchronization logic leads to inconsistent state, buggy behavior and user confusion.

Hard-to-debug
inconsistent state

Duplicated state and manual state synchronization lead to inconsistent state, manifesting as nonsensical UI that presents contradicting info.

At best, this confuses users. At worst, the inconsistent state reaches backend and databases with catastrophic consequences (especially in serverless situations).

Ad hoc patterns by
developers or entire teams

Most software engineers tend to develop idiosyncratic patterns when unsupported by a standardized, repeatable approach such as the framework provided by NgRx.

Preventing this is one key reason that we render data using Angular. One-off, ad hoc approaches reduce velocity, rack up costs and make it incredibly tough to move developers between projects. It’s all easily prevented via NgRx’s standardized approach.

Continual reinvention of the wheel

NgRx’s standardized solution is continually advanced by a devoted global community that contributes millions of hours of use and feedback to its team.

Custom solutions simply cannot compete with the higher quality functionality, refined ergonomics, fewer bugs and rich learning resources of NgRx.

Bloated components

With no standardized location to implement state management, logic moves at random into services and components. This is especially problematic when it ends up in components. The resultant mix of responsibilities rendering view and handling of user interaction versus state management bloats components.

Components should always be kept as lean as possible to minimize component testing, which is usually the most complex, time-consuming aspect of any project.

RxJs overuse

Without standardized patterns for state management, developers tend to overuse RxJs streams a highly complex topic in itself.

NgRx API is shaped using feedback from a global developer community that enables 80% of NgRx logic to remain free from RxJs streams! RxJs is only used lightly within NgRx effects and can be split into easily-understood, highly composable segments.

Cut your NgRx learning curve

NgRx empowers us to solve every one of these Angular application state management issues and enjoy just as many benefits but mastering NgRx is a challenge in itself.

As with every powerful tool, we must ensure it is used correctly to achieve the results desired. Streamline your team’s NgRx learning curve and gain the vital skills for implementing state management logic from the get-go!

Get in touch

“

Writing ad hoc rendering logic
is unanimously seen as a mistake.
It’s why we use frameworks like Angular
so why should we manage
our application state any differently?

A better way to manage your Angular application state

Empower your team to implement NgRx-based logic the right way. While always possible to fix what's broken, it’s far better to prevent it happening in the first place!

Correct approaches & techniques

Help your teammates learn to implement NgRx-based state management logic with confidence. Prevent all the common issues described above by learning how to implement standardized, pattern based state management in any Angular application.

Common patterns

Get to know the tried-and-tested patterns used to solve common requirements when implementing state management in Angular enterprise applications. Everything from slicing your state into independent slices and computing derived state for your views to deep linking and effects composition.

Best Practices

Acquaint your team with every NgRx best practice using easy-to-remember mantras. Once these mantras become engrained, your team will effortlessly fall back on and benefit from them during daily work.

“

Never duplicate state in your store!
Instead, compute your derived state
using NgRx selectors.

Testimonials

We have shared our industry-leading NgRx insights, patterns and best practices with countless developers both one-on-one and entire teams.

Nothing makes us happier than enriching teams with the know-how to deliver successful projects and amaze users (as well as themselves)!

So, what do our participants think?

Workshop

“

Both beginners and experienced developers from multiple teams were able to take away a lot of new know how from this workshop!

The 2-day format is great and provides enough time to cover all the bases. Everything from general idea of state management without specific approach all the way to architecture and best practices when doing so using NgRx.

Tomas is a great teacher, he is very enthusiastic to share his experience and expertise while supporting participants during hands on exercises. More so, we could get answers to specific questions related to state management in our ongoing projects!

Christof Leuenberger

Software Architekt, Die Mobiliar

Bern, Switzerland

Workshop

“

I learned so much in the NgRx 2 day workshop. After the first day I was already inspired to take a closer look to our current implementation and decided to improve the whole structure. This reduced the component size dramatically, which made testing way more enjoyable and had also had a big impact on test performance!

Igor Stojanovic

Software Entwickler, Die Mobiliar

Bern, Switzerland

Workshop

“

The course is a highlight. Tomas explains in great detail, shows pros and cons of alternatives, has tons of examples at hand and shares all the background of the features of NGRX.

Emanuel Indermühle

Software Architekt, Die Mobiliar

Bern, Switzerland

Workshop

“

Die Dozenten verfügen über tiefgründiges Wissen in Ihren Themenbereichen. Sie vermitteln die Informationen nicht einfach, sondern erreichen die Teilnehmer. Ein Mitarbeiter sagte bereits, dass er sich sehr darauf freut, seinen Code zu verbessern, weil er jetzt wirklich sieht, wie es gemacht werden sollte.

Päivi Tuhkanen

Manager, VMS

Helsinki, Finland

Workshop

“

Dieser Kurs wurde bereits für zwei unser Entwicklungsteams durchgeführt. Das Feedback war beide Male sehr positiv! Der Inhalt ist vollständig und immer auf dem aktuellen Stand. Ich empfehle diesen Kurs all jenen, die ihre Fähigkeiten verbessern wollen!

Dany Marques

Software Architekt, La Mobilière

Nyon, Switzerland

Workshop

“

Thanks a lot for the introduction to NgRx. The course was very clean structured and everything nicely explained.

Anonymous Feedback

Software Entwickler, La Mobilière

Bern, Switzerland

Workshop

“

Great workshop with space for Q&A. Solid background information. Good balance between theory and hands-on.

Anonymous Feedback

Software Entwickler, Die Mobiliar

Bern, Switzerland

Workshop

“

Excellent Workshop! I particularly liked the explanation of code in small steps (also in the slides)

Anonymous Feedback

Software Entwickler, Die Mobiliar

Bern, Switzerland

Workshop

“

It was very informative and I've learned a lot! It's was a lot of content so my brain is on fire now!

Anonymous Feedback

Software Entwickler, Die Mobiliar

Bern, Switzerland

Pricing & options

Book a 2-day workshop for your team and level up your NgRx skills

• Personalized feedback

  From our experience, up to 20 participants per workshop provides an optimal student/trainer ratio. This enables us to provide sufficient attention to all participants to address every individual question and support them during the hands-on exercises.

• In person workshops

  We strongly recommend in-person workshops, which provide unparalleled interaction and maximise the value of your time with us. In-person workshops generate deeper questions, clearer answers and the best setting for sharing extra feedback and know-how.

• Special options

  We also provide the opportunity to focus on only half the workshop content (e.g. basics for total beginners/advanced sections only for experienced participants).

Angular State Management with NgRx Workshop

CHF 9.749 + applicable VAT

• All-inclusive price
• Up to 20 participants
• In-person / hybrid / fully remote
• 2 full days (or 4 half days)

Get in touch now

• Rich content

  There will always be more content and resources available, so we do not expect you to complete all the work provided during the workshop itself. You will keep all content for future reference.

• Tailored for the audience

  We will always focus on the topics that bring the most value to the largest number of participants. To do this, we tailor each workshop to suit the unique needs of your team and guide you through the elements of NgRx most applicable to your projects.
  
  More advanced groups may breeze through the official content, then focus on specific use cases in a live coding session. Other groups may use the workshop to build a strong NgRx foundation then continue advancing their skills at their own pace.

Workshop content

Here’s a full outline of the workshop that features all concepts, topics and examples covered.

Please note, our workshop content will continually evolve as we factor in participant feedback to deliver the most valuable experience possible.

school General state management

• Introduction to state management
• State types overview
• Where can the state be stored
• State synchronization
• Approaches to state handling
• Heuristics
• State management libraries overview
• Component state management
• Service based state management

house Basic NgRx state management

• Theory and hands on exercises
• Component Store (lightweight NgRx solution for simple apps)
• Store (configuration, state slices, ...)
• Selectors (pluck state, derived state, memoization)
• Actions (tips, good action hygiene, ...)
• Reducers (immutability, ES spread syntax...)
• Dev tools (get current state, state diffs, ...)

account_balance Advanced NgRx state management

• Theory and hands on exercises
• Effects (async operations, long running processes, ...)
• Testing (of every concept, best practices, ...)
• Entity (further reduction of boilerplate)
• Router Store (Angular Router integration)
• Schematics (generate most of the code)
• Data / Facade
• Tips and best practices

turned_in_not Side-track topics

• Immutability
• Angular app architecture
• RxJs flattening operators
• RxJs marble testing syntax
• State Normalization

attachment Extra resources

• Full workshop in PDF format for future reference and knowledge preservation
• Extensive range of exercises and solutions (github repository)
• Workshop participation certificate
• Review of individual questions and exercises during hands-on phase