Overview of Angular NgRx

What is NgRx?

• NgRx is a popular state management library for Angular applications, using the Redux pattern.
• It provides a robust and scalable solution for managing application state predictably and efficiently.

Core Concepts

• Store: Central location for maintaining application state.
• Action: Dispatched from components, triggering state changes.
• Reducer: Function that determines modifications to state based on actions.
• Selector: Retrieves slices of state to be consumed by components.
• Effects: Handles side effects like HTTP requests, separating them from component logic.

NgRx Flow Overview

1. Action Dispatch: From component, triggers an event.
2. Effects: Handles the side effects, such as API calls.
3. Reducer: Modifies the store based on action results.
4. Selector: Retrieves updated state for components.

Example Use-Case

• File structure includes state, action, effects, reducer, and selector files.
• Actions include success and failure types, with parameters passed as props.
• Components dispatch actions and subscribe to selectors for state changes.

NgRx Interview Questions

Key Questions Discussed

1. What is NgRx?

   • State management library in Angular, using the Redux pattern.

2. Common Libraries in NgRx

   • NgRx Store, Effects, Router, Entity, Component Store, Operators.

3. What is Redux?

   • Pattern for managing state using actions, with a centralized store for state.

4. Usage of NgRx

   • Transfers data between components, handles HTTP requests, and maintains state across the app lifecycle.

5. State in Angular

   • Data saved across components, includes user data, application configuration, UI states.

6. Multiple States

   • Possible to manage multiple states via separate reducers and combined in app configuration.

7. Actions in NgRx

   • Unique events in the app, defined using createAction.

8. Dispatching Actions

   • Performed using the dispatch function in the component.

9. Reducers and Selectors

   • Reducers modify the state based on action types.
   • Selectors retrieve and derive data from the store.

10. Effects

    • Isolate side effects like API calls from components.

11. Entity Adapters

    • Simplify CRUD operations on entities, useful for uniform data structures.

12. Store Dev Tools

    • Used for debugging state changes; requires configuration and a browser extension.

13. Use of NgRx vs Angular Services/RxJS

    • Provides a better state management solution, easier debugging, and testing.

14. Real World Use-Case

    • Ideal for large-scale applications to manage user data and settings.

NgRx in Angular 17

• Changes in Angular 17 include the use of app.config instead of app.model for Standalone templates.
• Configuration includes provideStore and provideEffects for state management setup.

Additional Notes

• For further learning and updates, refer to the official NgRx website.
• Future videos will cover components store, signals, and operators.