5 questions found
What is NgRx and what problem does it solve for larger Angular apps?
Beginner
NgRx is a state management library for Angular, inspired by Redux, that keeps all of an app's shared state in one single central store. The only way to change that state is by dispatching a plain object called an action to a function called a reducer, making it very clear and predictable how and why state changes across a large app.
export const increment = createAction('[Counter] Increment');
export const counterReducer = createReducer(
0,
on(increment, (state) => state + 1)
);
Real-world example
A large e commerce app uses NgRx to manage its shopping cart, user session, and notification data all in one predictable, central place, making it easier for a large team to understand exactly how and where state changes happen.
Common follow-ups: Why might a smaller app choose signals or a simpler service based approach instead of NgRx?;What is the NgRx store DevTools extension used for?
State Management;Angular Signals
How do you select a specific piece of state from the NgRx store and use it in a component?
Intermediate
You use a selector function, created with createSelector, to describe exactly which piece of state you want, then inject the Store service and call its select method with that selector, receiving an observable that automatically emits whenever that specific piece of state changes.
export const selectCartItems = createSelector(
(state: AppState) => state.cart,
(cart) => cart.items
);
constructor(private store: Store<AppState>) {}
cartItems$ = this.store.select(selectCartItems);
Real-world example
A shopping cart badge component displays the current number of items by selecting just that specific piece of state from the store, automatically updating whenever an item is added or removed anywhere else in the app.
Common follow-ups: Why are selectors considered more efficient than manually filtering the entire state object yourself?;How do you combine multiple selectors together to derive a new computed value?
RxJS & Observables;Components & Templates
How do NgRx Effects let you handle asynchronous operations, like an API call, in response to a dispatched action?
Advanced
An Effect listens for a specific action, performs an asynchronous operation like an HTTP request, and then dispatches a new action once that operation completes, keeping asynchronous side effects cleanly separated from the pure, synchronous reducer functions that update the actual state.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
mergeMap(() => this.userService.getUsers().pipe(
map((users) => loadUsersSuccess({ users })),
catchError((error) => of(loadUsersFailure({ error })))
))
)
);
Real-world example
A user management page dispatches a loadUsers action, triggering an Effect that fetches the actual data from the server and dispatches a success action with the results, keeping the reducer itself completely free of any asynchronous logic.
Common follow-ups: Why must reducers stay pure and free of side effects like API calls?;What is the difference between mergeMap and switchMap when used inside an effect?
HTTP Client & Interceptors;RxJS & Observables
What is the NgRx Entity library, and how does it simplify managing collections of data, like a list of users?
Intermediate
NgRx Entity provides a standard, normalized way to store collections of similar items, keyed by their unique id, along with prebuilt functions for common operations like adding, updating, and removing entries, saving you from writing repetitive boilerplate code for managing lists of data in your reducers.
export interface UserState extends EntityState<User> {}
export const adapter = createEntityAdapter<User>();
export const initialState = adapter.getInitialState();
export const reducer = createReducer(
initialState,
on(addUser, (state, { user }) => adapter.addOne(user, state))
);
Real-world example
A user management feature manages its list of users using NgRx Entity, gaining reliable, well tested add, update, and remove operations without needing to hand write that repetitive array manipulation logic themselves.
Common follow-ups: How does storing entities in a normalized, keyed format improve performance compared to a plain array?;What selector functions does NgRx Entity provide automatically out of the box?
State Management;Design Patterns in Angular
How do you decide between using NgRx, signals, or a simple service for managing state in an Angular app?
Beginner
For small to medium apps, a simple service combined with signals is often perfectly sufficient and much easier to learn. NgRx becomes valuable for very large apps with complex, frequently changing shared state across many features, or when a large team needs the strict predictability and tooling, like time travel debugging, that NgRx provides.
// Simple approach, sufficient for many apps
@Injectable({ providedIn: 'root' })
export class CartService {
items = signal<Item[]>([]);
}
// NgRx, better suited for large, complex shared state across many features
this.store.dispatch(addItem({ item }));
Real-world example
A small internal tool sticks with a simple signal based service for managing its state, while a large enterprise application with dozens of interacting features adopts NgRx for its stricter, more predictable structure.
Common follow-ups: What specific NgRx tooling, like time travel debugging, makes it worth the added complexity for large teams?;How easy is it to migrate from a simple service based approach to NgRx later if the app grows significantly?
State Management;Angular Signals