In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a simple TO-DO App.
\nIn the bigger apps, managing the data states is very complicated. In angular, each component has its own state, to share the data/state between the components we normally use @Input and @Output decorators, but when the application goes bigger, its challenging to maintain the data consistency. So to solve this problem, redux was introduced. It provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another.
\nNGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators. NGXS is very simple to use as compared to other state management patterns like redux and Akita. NGXS takes full advantage of angular and typescript over the redux pattern.\nThere are majors 4 concepts to NGXS It is a global state container and manages the states of the application.We can dispatch the actions to perform certain operations. An action is a type of command which should be called when something happens or you want to trigger at any event like adding a new todo, listing todos etc. States are classes along with decorators to describe metadata and action mappings. Selects are functions that slice a specific portion of the state from the global state container i.e. to get the data from the specific global state whenever you want to use. Install the Here we have created a component that dispatches actions to create a to-do and for other operations. Apart from that, we are using a selector Put this code in the Create a folder Here we have created the state of the todo, it contains the global state of the todo list.\nCreate a folder Here we have created a form that we use to create todo and listed all todos.\nput this code in your After lots of code, it's time to see the results. So here is the UI you will get. To get the complete code please go to Github Repo.\n We have gone through the basic concepts of NGXS and built a simple to-do app. There are a lot of advanced features and plugins by NGXS, but beyond the scope, we could not add, but hopefully, we will be exploring in future blogs.How NGXS works:
\n1. Store:
\n
\n this.store.dispatch(new TodoActions.AddTodo(form));2. Actions
\n
\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: ITodo) { }\n}3. State
\n
\nimport { Injectable } from '@angular/core';\nimport { State } from '@ngxs/store';\n\n@State<ITodoStateModel[]>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState {}4. Select
\n
\n @Select(TodoState) todoList$: Observable<ITodo>;Let's build a To-Do App:
\n1. Get started
\nnpm install @ngxs/store --save then import the below code in app.module.ts
\n//File name app.module.ts\nimport { NgxsModule } from '@ngxs/store';\n@NgModule({\n imports: [\n NgxsModule.forRoot([ToDoState], { // here login state \n developmentMode: !environment.production\n })\n ]\n})\nexport class AppModule {}2. Create your store
\nTodoState, from which we are listening for the updated to-do list.app.component.ts
\n// File name app.component.ts\nimport { Component } from '@angular/core';\nimport { Store, Select } from '@ngxs/store';\nimport { TodoActions } from './state/todo-actions';\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\nimport { TodoState, ITodo } from './state/todo-state';\nimport { Observable } from 'rxjs';\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n title = 'ngxs-todo-app';\n\n @Select(TodoState) todoList$: Observable<ITodo>;\n\n addForm = new FormGroup({\n title: new FormControl('', [Validators.required])\n });\n constructor(private store: Store){}\n onSubmit(form: any){\n this.store.dispatch(new TodoActions.AddTodo(form));\n }\n markDone(id: string, is_done: boolean){\n this.store.dispatch(new TodoActions.markDone(id, is_done));\n }\n}3. Create your actions
\nstate and put the todo-actions.ts file and add below code
\n// File name todo-actions.ts\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: any) { }\n}\n\nexport class EditTodo {\n static readonly type = '[Todo] Edit';\n constructor(public payload: any) { }\n}\n\nexport class FetchAllTodos {\n static readonly type = '[Todo] Fetch All';\n}\n\nexport class DeleteTodo {\n static readonly type = '[Todo] Delete';\n constructor(public id: number) { }\n}4. Create your State:
\nstate and put the todo-state.ts file and add below code
\n// File name todo-state.ts\nimport { Injectable } from '@angular/core';\nimport { State, NgxsOnInit, Action, StateContext } from '@ngxs/store';\nimport { TodoActions } from './todo-actions';\nimport { patch, updateItem } from '@ngxs/store/operators';\n\nexport interface ITodo {\n id: string;\n title: string;\n is_done: boolean;\n}\nexport interface ITodoStateModel {\n todoList: ITodo[];\n}\n@State<ITodoStateModel>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState implements NgxsOnInit {\n ngxsOnInit(ctx) {\n ctx.dispatch(new TodoActions.FetchAllTodos());\n }\n @Action(TodoActions.markDone)\n markDone(\n ctx: StateContext<ITodoStateModel>, \n { payload, is_done }: TodoActions.markDone\n ) {\n ctx.setState(\n patch({\n todoList: updateItem(\n (item: ITodo) => item.id === payload, \n patch({ is_done: !is_done })\n )\n })\n );\n }\n\n @Action(TodoActions.AddTodo)\n add(\n ctx: StateContext<ITodoStateModel>,\n { payload }: TodoActions.AddTodo,\n ) {\n const state = ctx.getState();\n ctx.setState({\n ...state,\n todoList: [\n ...state.todoList,\n {\n ...payload,\n id: Math.random().toString(36).substring(7),\n is_done: false\n }\n ],\n }\n );\n }\n\n}5. Create your html view
\napp.component.html
\n<!-- File name app.component.html -->\n<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">\n <input type="text" formControlName="title" class="form-control todo-list-input" placeholder="What do you need to do today?">\n <button class="add btn btn-primary font-weight-bold todo-list-add-btn">Add</button> \n</form>\n<ul class="d-flex flex-column-reverse todo-list">\n <li *ngFor="let todo of (todoList$ | async) ?. todoList" [ngClass]="{'completed': todo.is_done}">\n <div class="form-check"> \n <label class="form-check-label"> \n <input (click)="markDone(todo.id, todo.is_done)" class="checkbox" type="checkbox" [checked]="todo.is_done">{{todo.title}} <i class="input-helper"></i></label> \n </div>\n </li>\n </ul>Conclusion
\n