https://github.com/piyalidas10/ngrx-angular
NGRX-Angular 18 with a simple example
https://github.com/piyalidas10/ngrx-angular
angular angular18 ngrx ngrx-store state-management
Last synced: about 2 months ago
JSON representation
NGRX-Angular 18 with a simple example
- Host: GitHub
- URL: https://github.com/piyalidas10/ngrx-angular
- Owner: piyalidas10
- Created: 2024-12-31T14:29:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-05T11:03:49.000Z (about 1 year ago)
- Last Synced: 2025-02-23T08:29:01.611Z (11 months ago)
- Topics: angular, angular18, ngrx, ngrx-store, state-management
- Language: TypeScript
- Homepage:
- Size: 3.37 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 18 NGRX Pattern (component -> Actions -> Effects -> Reducers -> Store -> Selectors -> Component)
1. Component dispatch the action. Action is nothing than an object with type & payload.
2. Action will reach to effects. In Previous Redux pattern, we were sending actions directly to reducers which is synchronous. Now if you want to invoke the APIs which will be performed inside effects.
3. Every success & failure action is sent to the reducer. We keep 3 sections (load, success, error) inside reducers.
4. Reducer will return data to the store / state which is new state. State's value depends on what data returning from reducers.
5. Instead of directly consume data from store, Selectors will help to select data as per requirements. You can transform data. Suppose you have customers data in your store, you want to fetch only customers names & ids instead of all customers details. You can use selector to filter the customers data. Selectors are MemoizedSelectors, call only one time in entire application.
6. Selectors will be consumed in component where you want to display the response.
##### Selectors
Selectors are MemoizedSelectors, call only one time in entire application
Stackbliz Link: https://stackblitz.com/~/github.com/piyalidas10/NGRX-Angular
### Angular 18 state management using NGRX - Store, Reducer, Effects, Selectors | NgRx tutorial in Hindi
https://www.youtube.com/watch?v=PvL7TULFxoE