Skip to content

Added What is NgRx , Issue #93 #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,8 @@
|280| [What are Angular Signals?](#what-are-angular-signals)
|281| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example)
|282| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them)
|283| [](#)
|283| [What is NgRx?](#what-is-ngrx)
|284| [](#)

1. ### What is Angular Framework?

Expand Down Expand Up @@ -4826,3 +4827,42 @@
Route parameters provide a flexible way to handle dynamic data in your Angular application. They allow you to create routes that can be easily customized and provide a seamless user experience by reflecting the current state of the application in the URL.

**[⬆ Back to Top](#table-of-contents)**

283. ### What is NgRx?
**NgRx** is a framework for building **reactive applications** in Angular using **Redux-inspired state management**. It provides a **store** for managing the state of your application in a **unidirectional data flow** manner.

#### Key Concepts in NgRx:

- **Store**: A centralized container that holds the state of your application.
- **Actions**: Events that describe something that happened (e.g., `LOAD_USERS`).
- **Reducers**: Pure functions that take the current state and an action to return a new state.
- **Selectors**: Functions used to retrieve slices of state from the store.
- **Effects**: Handle side effects (like API calls) outside of reducers using RxJS observables.

#### Benefits:
- Predictable state management
- Time-travel debugging
- Immutability enforcement
- Better separation of concerns
- Scalable for large applications

#### Example:

```ts
// action.ts
export const loadUsers = createAction('[Users Page] Load Users');

// reducer.ts
const userReducer = createReducer(initialState,
on(loadUsers, state => ({ ...state, loading: true }))
);

// effect.ts
loadUsers$ = createEffect(() => this.actions$.pipe(
ofType(loadUsers),
mergeMap(() => this.userService.getAll()
.pipe(map(users => loadUsersSuccess({ users }))))
));
```

**[⬆ Back to Top](#table-of-contents)**