Skip to content

Commit fb4453f

Browse files
committed
fix issue 93
1 parent 38bfd04 commit fb4453f

File tree

1 file changed

+48
-1
lines changed

1 file changed

+48
-1
lines changed

README.md

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@
304304
|280| [What are Angular Signals?](#what-are-angular-signals)
305305
|281| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example)
306306
|282| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them)
307-
|283| [](#)
307+
|283| [What is NgRx?](#what-is-ngrx)
308308

309309
1. ### What is Angular Framework?
310310

@@ -4824,3 +4824,50 @@
48244824
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.
48254825
48264826
**[⬆ Back to Top](#table-of-contents)**
4827+
4828+
283. ### What is NgRx?
4829+
4830+
NgRx is a framework for building reactive applications in Angular. It is a state management library that provides a Redux-inspired architecture for managing and centralizing application state. NgRx is built on top of RxJS and follows the principles of reactive programming.
4831+
4832+
The main components of NgRx include:
4833+
4834+
1. **Store:** A single, immutable data structure that holds the entire application state.
4835+
2. **Actions:** Plain objects that describe events or user interactions that can change the state.
4836+
3. **Reducers:** Pure functions that take the current state and an action, and return a new state.
4837+
4. **Effects:** Side effect handlers that listen to actions and can perform asynchronous operations like API calls.
4838+
5. **Selectors:** Functions used to query and derive data from the store.
4839+
4840+
NgRx helps manage complex state in large Angular applications by providing predictable state management, improved debugging capabilities, and better separation of concerns. It's particularly useful for applications with:
4841+
- Complex data flows
4842+
- Multiple components sharing the same data
4843+
- Need for time-travel debugging
4844+
- Requirements for state persistence
4845+
4846+
Here's a simple example of NgRx usage:
4847+
4848+
```typescript
4849+
// Action
4850+
export const loadUsers = createAction('[User List] Load Users');
4851+
4852+
// Reducer
4853+
export const userReducer = createReducer(
4854+
initialState,
4855+
on(loadUsers, state => ({ ...state, loading: true }))
4856+
);
4857+
4858+
// Selector
4859+
export const selectUsers = (state: AppState) => state.users;
4860+
4861+
// Component
4862+
export class UserComponent {
4863+
users$ = this.store.select(selectUsers);
4864+
4865+
constructor(private store: Store<AppState>) {}
4866+
4867+
loadUsers() {
4868+
this.store.dispatch(loadUsers());
4869+
}
4870+
}
4871+
```
4872+
4873+
**[⬆ Back to Top](#table-of-contents)**

0 commit comments

Comments
 (0)