Actions and reducers pattern in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an action with a type.

Angular

export const loadItems = createAction('[1]');

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

A'[Items] Load Items'

B'loadItems'

C'Items Load'

D'Load Items Action'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a simple string without brackets or source prefix.

Using camelCase instead of a descriptive string.

The action type should be a descriptive string usually in the format '[Source] Event'.

2fill in blank

medium

Complete the reducer to handle the loadItems action.

Angular

const itemsReducer = createReducer(initialState, on(loadItems, (state) => [1]));

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

A{ ...state, loading: true }

B{ loading: false }

Cstate.loading = true

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Mutating the state directly instead of returning a new object.

Returning incomplete state without copying existing properties.

Reducers return a new state object; here we set loading to true while keeping other state properties.

3fill in blank

hard

Fix the error in the reducer to update items on success action.

Angular

on(loadItemsSuccess, (state, [1]) => ({ ...state, items: payload.items, loading: false }))

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

Apayload

B{ payload }

C{ items }

Daction

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single variable without destructuring.

Using incorrect variable names that don't match the action payload.

The second argument is destructured to get the payload object containing items.

4fill in blank

hard

Fill both blanks to create a selector for items and loading state.

Angular

export const selectItems = createSelector([1], (state) => state.[2]);

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

AselectFeature

Bitems

Cloading

DselectState

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect selector names.

Selecting a wrong property from the state.

The selector uses selectFeature to get the feature state and then selects the items property.

5fill in blank

hard

Fill all three blanks to define an effect that loads items on loadItems action.

Angular

loadItemsEffect = createEffect(() => this.actions$.pipe(ofType([1]), switchMap(() => this.service.[2]().pipe(map(items => loadItemsSuccess({ [3]: items }))))));

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

AloadItems

BfetchItems

Citems

DloadItemsSuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong action or service method names.

Incorrect payload property name in loadItemsSuccess.

The effect listens for loadItems action, calls fetchItems service method, and dispatches loadItemsSuccess with items.