https://github.com/jdegand/ngrx-example
NgRx Walkthrough tutorial upgraded
https://github.com/jdegand/ngrx-example
angular-16 ngrx tests
Last synced: 10 months ago
JSON representation
NgRx Walkthrough tutorial upgraded
- Host: GitHub
- URL: https://github.com/jdegand/ngrx-example
- Owner: jdegand
- Created: 2023-08-15T19:21:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-07T19:19:06.000Z (over 1 year ago)
- Last Synced: 2025-01-22T09:12:28.333Z (about 1 year ago)
- Topics: angular-16, ngrx, tests
- Language: TypeScript
- Homepage: https://jdegand.github.io/NgRx-example/
- Size: 202 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgRx Example
[NgRx documentation walkthrough tutorial](https://ngrx.io/guide/store/walkthrough) reworked to use ngrx effects.
## Screenshots
## Link
[Live Link](https://jdegand.github.io/NgRx-example)
## Built With
- [Angular](https://angular.io)
- [Angular CLI](https://github.com/angular/angular-cli) version 16.0.1.
- [NgRx](https://ngrx.io/docs)
## Thoughts
- The main walkthrough tutorial takes a shortcut, and doesn't add effects, and just directly calls the service class in `app.component.ts`.
- I removed the direct call to the service and added ngrx effects.
- My implementation could be improved. An error action could be added for when the API request fails.
- I went through the testing documentation, and it is slightly outdated, as the walkthrough was changed to use `createActionGroup` versus defining and exporting each action individually. You have to replace the imports of `onAdd` and `onRemove` with an import of `BooksActions`. Then you call `BooksActions.onAdd` in place of `onAdd`.
## Useful Resources
- [Concrete Page](https://www.concretepage.com/ngrx/ngrx-effects-example#download) - ngrx effects
- [Dev.to](https://dev.to/this-is-angular/ngrx-tips-i-needed-in-the-beginning-4hno#create-reusable-reducers) - create reusable reducers
- [Dev.to](https://dev.to/ngrx/ngrx-action-group-creator-1deh) - action group creator