Angular Architecture & Modules Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
State Management (NgRx) in Angular
Test your knowledge of state management with NgRx in Angular, including Store, Actions, Reducers, Selectors, Effects, state updates, asynchronous operations, and Redux principles.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Guards & Resolvers in Angular
15 questions · 12 min · Medium
Directives (Structural & Attribute) in Angular
15 questions · 12 min · Medium
Components & Data Binding in Angular Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Angular Routing & Navigation Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Services & Dependency Injection in Angular
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is the primary purpose of NgRx in Angular applications?
- A. To manage application state in a predictable way
- B. To create HTML templates
- C. To replace Angular components
- D. To manage CSS animations
Show answer
A. To manage application state in a predictable way
NgRx provides state management tools that help applications maintain predictable state updates and share state across components.
-
2. Which NgRx library provides a centralized store for application state?
- A. @ngrx/effects
- B. @ngrx/store
- C. @ngrx/router-store
- D. @ngrx/entity
Show answer
B. @ngrx/store
The @ngrx/store library provides the Store, Actions, Reducers, and Selectors used for reactive state management.
-
3. What is the role of an Action in NgRx?
- A. To describe an event or intention that occurred
- B. To directly modify the DOM
- C. To define component styles
- D. To replace the Store
Show answer
A. To describe an event or intention that occurred
An NgRx Action describes an event, such as a user interaction or an API response, that may cause state to change.
-
4. What is the primary responsibility of a Reducer in NgRx?
- A. To perform HTTP requests
- B. To calculate a new state from the current state and an action
- C. To render Angular templates
- D. To subscribe automatically to every service
Show answer
B. To calculate a new state from the current state and an action
A reducer is a pure function that receives the current state and an action and returns the next state without mutating the existing state.
-
5. What is the purpose of a Selector in NgRx?
- A. To extract or derive specific data from the Store
- B. To dispatch HTTP requests directly
- C. To change component templates
- D. To create new Actions automatically
Show answer
A. To extract or derive specific data from the Store
Selectors provide reusable ways to read and derive data from application state, and memoized selectors can avoid unnecessary recomputation.
-
6. Which NgRx library is commonly used to handle side effects such as API calls?
- A. @ngrx/store
- B. @ngrx/effects
- C. @ngrx/entity
- D. @ngrx/schematics
Show answer
B. @ngrx/effects
NgRx Effects handle side effects, such as HTTP requests, and can dispatch new Actions when asynchronous operations succeed or fail.
-
7. Which method is commonly used to dispatch an Action to the NgRx Store?
- A. store.emit()
- B. store.dispatch()
- C. store.update()
- D. store.trigger()
Show answer
B. store.dispatch()
The dispatch() method sends an Action to the Store so registered reducers and effects can respond to it.
-
8. Which method is commonly used to select state from the NgRx Store?
- A. store.select()
- B. store.getState()
- C. store.read()
- D. store.fetch()
Show answer
A. store.select()
The select() method creates an Observable of the selected state or derived data.
-
9. What does immutability mean in NgRx state management?
- A. Existing state objects are modified directly
- B. State is never allowed to change
- C. State updates produce new state values instead of mutating existing state
- D. All state must be stored as strings
Show answer
C. State updates produce new state values instead of mutating existing state
Immutable updates preserve existing state objects and return new state values, making state changes easier to track and reason about.
-
10. Which function is commonly used to define an NgRx Action creator?
- A. createAction()
- B. createReducer()
- C. createSelector()
- D. createEffect()
Show answer
A. createAction()
The createAction() function creates an Action creator, optionally with a payload defined using props().
-
11. Which function is commonly used to create a reducer in modern NgRx?
- A. createReducer()
- B. createStoreAction()
- C. createEffect()
- D. createSelector()
Show answer
A. createReducer()
The createReducer() function defines state transition logic, commonly using on() to associate Actions with reducer handlers.
-
12. Which NgRx function is commonly used to create a memoized selector?
- A. createAction()
- B. createEffect()
- C. createSelector()
- D. createReducer()
Show answer
C. createSelector()
The createSelector() function creates selectors that can derive data and memoize their latest results when their input values have not changed.
-
13. Which RxJS operator is commonly used in an NgRx Effect to map an Action to an asynchronous API request while switching to the latest inner Observable?
- A. switchMap()
- B. tap()
- C. filter()
- D. take()
Show answer
A. switchMap()
switchMap() switches to the latest inner Observable. Other operators, such as mergeMap() or concatMap(), may be more appropriate depending on the required concurrency behavior.
-
14. What is the purpose of a success Action after an API request handled by an NgRx Effect?
- A. To indicate that the asynchronous operation completed successfully and provide its result
- B. To delete the entire Store
- C. To prevent all future Actions
- D. To replace every Selector
Show answer
A. To indicate that the asynchronous operation completed successfully and provide its result
A success Action commonly carries the API result so a reducer can update the Store with the returned data.
-
15. Which is a major benefit of using NgRx in a large Angular application?
- A. It eliminates the need for all services
- B. It provides centralized, predictable state management and improves traceability
- C. It automatically removes every asynchronous operation
- D. It prevents components from reading application data
Show answer
B. It provides centralized, predictable state management and improves traceability
NgRx makes shared application state and state transitions easier to organize, test, debug, and trace across complex applications.