https://github.com/engichang1467/ngxs-tutorial
Learning how to use state management (NGXS) in Angular
https://github.com/engichang1467/ngxs-tutorial
angular ngxs typescript
Last synced: 2 months ago
JSON representation
Learning how to use state management (NGXS) in Angular
- Host: GitHub
- URL: https://github.com/engichang1467/ngxs-tutorial
- Owner: engichang1467
- Created: 2021-02-11T05:25:34.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-11T05:49:56.000Z (over 5 years ago)
- Last Synced: 2025-01-17T18:29:30.531Z (over 1 year ago)
- Topics: angular, ngxs, typescript
- Language: TypeScript
- Homepage:
- Size: 150 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NGXS Tutorial
Learning how to use state management (NGXS) in Angular.
## State Management Concepts
* Action
- A command which should trigger something to happen
- the result of something that has already happened
```Typescript
export class AddTutorial {
static readonly type = '[TUTORIAL] Add';
constructor(public payload: Tutorial) {}
}
// Tutorial is a model
```
* Store
- A global state manager that represents our app's entire data state tree
- We change the state of the store by disatching actions
* State
- classes along with decorators to describe metadata and action mappings
```Typescript
@State({
name: 'tutorials',
defaults: {
tutorials: []
}
})
export class TutorialState {}
```
* Select
- functions that slice a specific portion of the state from the global state container.
```Typescript
@Selector()
static getTutorials(state: TutorialStateModel) {
return state.tutorials;
}
```
This sample Angular app takes in the name and url of a tutorial, and present it in hyperlink format once the user submit.
## References
- [Link for the tutorials](https://www.youtube.com/watch?v=SfiO3bDUK7Q)
- [Frontend State Management](https://nitin15j.medium.com/frontend-state-management-44169546a2f7)
- [Introduction to NGXS - Angular State Management](https://medium.com/front-end-weekly/introduction-to-ngxs-angular-state-management-2516b2d9917e)