ngrx - inDepth.dev

NGRX Best Practices

In my last article we glossed over things that one should probably avoid doing when building an Angular application with NgRx; today, we are going to discuss things that are good to do when facing that very same challenge.

ngrx

NGRX Bad Practices

It is time to explore some practices and patterns the community has recognized as harmful or complicated. So let's start with a list of what not to do in NGRX

angular

Better Action Hygiene with Events in NgRx

We explore how a small adjustment can guarantee Good Action Hygiene, lead to extensible reducers and lower the high code-cost of NgRx.

ngrx

Understanding @ngrx/component-store selector debouncing

@ngrx/component-store selectors have a debounce option that lets the state 'settle' before emitting. In this article we will demonstrate what this means in practice before walking through the code that makes this possible.

angular

NGRX | Use effects and router-store to isolate route related side effects.

One of the major advantages of ngrx is that we can isolate side effects from the components. When we need to have router related data on the component we'll usually use the ActivatedRoute service from the component itself.

angular

Making your application feel faster by prefetching data with NgRx

Prefetching can be used to make your application feel faster. This is trivial within an application that is using the global NgRx Store, as the global Store is just a cache object. By just creating an action and listening to that action inside an Effect, we can preload the cache.

ngrx

Make NgRx hold Business Logic: Dumb components, Smart store

Our team “moved everything” into NgRx. Follow our journey and learn why the whole team is still happy with it.

angular

Angular: The Unexpected

When your favorite framework doesn’t work as you thought it does Every Angular developer has encountered some instances when the framework did something unusual, and sometimes even outright nonsensical. Today we are going to take a look at some of those cases and explain why it works the way

angular

How to set up an Nx-style monorepo workspace with the Angular CLI: Part 5

In the final part of this tutorial, we create the seatmap data access, seat listing feature, shared buttons UI, and shared formatting utilities library. Finally, we compare our approach with the full Nx toolchain.

angular

How to set up an Nx-style monorepo workspace with the Angular CLI: Part 4

In Part 4 of this tutorial, we create the check-in data access and check-in feature shell libraries. We create the check-in desktop application, review and verify how much our tool automated and finally create the mobile check-in application.

angular

How to set up an Nx-style monorepo workspace with the Angular CLI: Part 2

In Part 2 of this tutorial, we'll set up our custom generate project tool and create the shared and booking data access libraries with NgRx. To honor the flow of dependencies, we extract a shared environments library.

ngrx

An experiment, Using the global NgRx Store as a local store

If you've been using NgRx, you know that state is being managed with reducer functions and that each slice of the state has its own reducer.

angular

Understanding the magic behind @ngrx/effects

This article dives deep into internals of ngrx/effects class. It explains how entities are put together and how this module is tied to ngrx/store.

ngrx

Understanding the magic behind StoreModule of NgRx (@ngrx/store)

In this article we're going to dive deep into the internals of @ngrx/store package. We'll examine how state, reducers, store and actions work with each other and where meta reducers fit in.

angular

Tiny Angular application projects in Nx workspaces

Extract workspace libraries to get tiny Angular application projects. We'll create assets, styles, and environments libraries for an Nx workspace. Step-by-step commands and instructions.

ngrx

Help Angular to make your application faster

To give a little background, at work we're creating an application to schedule the daily rounds of caregivers. This is done in a one-week calendar view for multiple caregivers, typically between 20 and 50 caregivers are being scheduled at the same time. In the calendar view, we have a row

ngrx

NgRx creator functions 101

The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.

ngrx

Managing different slices of the same NgRx state

In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store.

ngrx

Making an Angular project mono repo with NgRx state management and lazy-loading.

By using Angular CLI, NgRx feature modules and a bit of manual work:-)

ngrx

How to Start Flying with Angular and NgRx

NgRx is an open source library that provides reactive state management for your Angular applications. Inspired by Redux, NgRx provides a way to maintain...

ngrx

NgRx: How and where to handle loading and error states of AJAX calls?

Should these states be part of NgRx Store to begin with? TL; DR: It depends… However, we’ll look into the pros and cons of different approaches. If you chose to make the loading/error as part of the state, make sure they are encompassed within a single property. Does

ngrx

How the AngularFire Library makes Firebase feel like Magic

The following post is going to give a high level view of the AngularFire library, and how it works under the hood. I’m going to walkthrough a simple grocery list app I wrote, and show how using AngularFire makes things seem to work like magic.

ngrx

Start using ngrx/effects for this

You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action.