NgRx store concept in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the NgRx StoreModule in an Angular standalone component.

Angular

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

@Component({
  standalone: true,
  imports: [StoreModule.[1]({})],
  selector: 'app-root',
  template: `<h1>Welcome</h1>`
})
export class AppComponent {}

Drag options to blanks, or click blank then click option'

AforFeature

BcreateStore

CprovideStore

DforRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using forFeature instead of forRoot in the root component.

Trying to use createStore which is not a StoreModule method.

The StoreModule.forRoot method sets up the root store in an Angular app.

2fill in blank

medium

Complete the code to select a piece of state from the store using a selector.

Angular

this.userName$ = this.store.select([1]);

Drag options to blanks, or click blank then click option'

AfetchUserName

BgetUserName

CselectUserName

DloadUserName

Attempts:

3 left

💡 Hint

Common Mistakes

Using verbs like get or fetch which are not typical selector names.

Trying to call the selector instead of passing it as a reference.

Selectors are functions that extract slices of state. The common naming is selectUserName.

3fill in blank

hard

Fix the error in dispatching an action to the store.

Angular

this.store.[1](loadItems());

Drag options to blanks, or click blank then click option'

Atrigger

Bdispatch

Csend

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like emit or send.

Confusing dispatch with select.

The correct method to send actions to the store is dispatch.

4fill in blank

hard

Fill both blanks to define a reducer function with initial state and action handling.

Angular

export const counterReducer = createReducer(
  [1],
  on(increment, state => ({ count: state.count [2] 1 }))
);

Drag options to blanks, or click blank then click option'

A{ count: 0 }

B+

C-

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number instead of an object for initial state.

Using subtraction instead of addition for increment.

The initial state is an object with count 0, and the increment adds 1 to count.

5fill in blank

hard

Fill all three blanks to create a feature store module with a reducer and selector.

Angular

StoreModule.[1]('counter', [2]),

export const selectCounter = createFeatureSelector<CounterState>('[3]');

Drag options to blanks, or click blank then click option'

AforFeature

BcounterReducer

Ccounter

DforRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using forRoot instead of forFeature for feature modules.

Mismatching feature names in selector and module.

forFeature registers a feature store slice named 'counter' with its reducer. The selector uses the same feature name.