NgRx store concept in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component using NgRx store?

Consider this Angular component that selects a piece of state from the NgRx store and displays it.

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-counter',
  template: `
Count: {{ count$ | async }}
`
})
export class CounterComponent {
  count$: Observable;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = this.store.select('count');
  }
}

If the store's state is { count: 5 }, what will this component render?

A Count: 5

B Count: NaN

C Count: 0

D Count: undefined

💡 Hint

Think about what the select method does and how the async pipe works.

The store.select('count') returns an observable of the count value from the store. The async pipe subscribes to this observable and displays the current value. Since the store state has count: 5, the component renders Count: 5.

❓ state_output

intermediate

What is the new state after this NgRx reducer runs?

Given this reducer function for a counter feature:

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

If the current state is 3 and the increment action is dispatched, what will be the new state?

A 4

B 3

C -1

D 0

💡 Hint

Look at how the reducer updates the state when the increment action is received.

The reducer adds 1 to the current state when the increment action is dispatched. Starting from 3, the new state becomes 4.

📝 Syntax

advanced

Which option correctly defines an NgRx action with a payload?

Which of the following code snippets correctly defines an NgRx action named addItem that carries a payload of type string?

A

import { createAction } from '@ngrx/store';
export const addItem = createAction('addItem', (payload: string));

B

import { createAction } from '@ngrx/store';
export const addItem = createAction('addItem', { item: string });

C

import { createAction, props } from '@ngrx/store';
export const addItem = createAction('addItem', (item: string) => ({ item }));

D

import { createAction, props } from '@ngrx/store';
export const addItem = createAction('addItem', props<{ item: string }>());

💡 Hint

Remember that NgRx actions with payloads use props to define the payload shape.

Option D correctly uses createAction with props<{ item: string }>() to define the payload. Other options either misuse the syntax or omit props.

🔧 Debug

advanced

Why does this NgRx selector cause a runtime error?

Given this selector code:

import { createSelector } from '@ngrx/store';

const selectFeature = (state: any) => state.feature;

const selectItems = createSelector(
  selectFeature,
  (feature) => feature.items
);

When the store state is {} (empty object), selecting selectItems causes an error. Why?

A Because the selector must return an observable, not a value.

B Because <code>createSelector</code> requires three arguments, not two.

C Because <code>feature</code> is undefined, accessing <code>feature.items</code> throws a TypeError.

D Because the state parameter must be typed as <code>any</code> to avoid errors.

💡 Hint

Think about what happens if state.feature does not exist.

If state.feature is undefined, then feature.items tries to access a property on undefined, causing a TypeError at runtime.

🧠 Conceptual

expert

What is the main benefit of using NgRx store in Angular applications?

Choose the best explanation for why developers use NgRx store in Angular apps.

A It replaces Angular's dependency injection system for services.

B It centralizes application state in a single immutable store, making state changes predictable and easier to debug.

C It automatically generates UI components based on the state shape.

D It allows direct manipulation of the DOM without Angular templates.

💡 Hint

Think about how NgRx helps manage state and debugging.

NgRx store centralizes state in one place and enforces immutability, which helps developers track changes and debug easily. Other options describe unrelated or incorrect features.