DEV Community: seif hassan

Part Two: NGXS State Management: Beginner's Guide.

seif hassan — Tue, 04 Jul 2023 07:42:53 +0000

How are the different concepts organised?

Now that you have gained familiarity with the various concepts of NGXS, let's explore how they interact with each other through a schema, which provides a clear visual representation of their relationships and interactions.

Schema explaining NGXS functioning

After we have set up NGXS, Now lets dive deep into our example:

add the following code in the imports of the @NgModule:

NgxsModule.forRoot([TodoState], { developmentMode: !environment.production }),

like this:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgxsModule.forRoot([TodoState], {
      developmentMode: !environment.production
    }),
  ]
})
export class AppModule { }

As we discussed earlier in the theoretical part, everything begins with a component. Therefore, let's proceed by writing the code for the app.component.ts file:

import { Component } from '@angular/core';
import {Select, Store} from '@ngxs/store';
import {AddTodo, EmptyTodo} from '../store/todo.actions';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  newTodo = '';

  constructor(private readonly store: Store) {}

  onAddTodo(): void {
    if (this.newTodo.length > 0) {
      this.store.dispatch(new AddTodo(this.newTodo));
    }
    this.newTodo = '';
  }

  onEmptyList(): void {
    this.store.dispatch(new EmptyTodo());
  }

Let’s create the Actions in the `todo.actions.ts`:

export class AddTodo {
  static readonly type = '[Todo] Add';

  constructor(public newTodo: string) {
  }
}

export class EmptyTodo {
  static readonly type = '[Todo] Empty';
}

Since the addTodo action requires the new todo as an input, we need to declare the constructor with newTodo as a parameter.

Following the triggering of these actions, certain code will be executed to modify the state. This is where the todo.state.ts file comes into play.

import {Action, State, StateContext} from '@ngxs/store';
import {AddTodo, EmptyTodo} from './todo.actions';

export interface TodoStateModel {
  todoList: string[];
}

@State<TodoStateModel>({
  name: 'todo',
  defaults: {
    todoList: [],
  }
})
export class TodoState {

  @Action(AddTodo)
  addTodo({patchState, getState}: StateContext<TodoStateModel>, {newTodo}: AddTodo): void {
    patchState({todoList: [...getState().todoList, newTodo]});
  }

  @Action(EmptyTodo)
  emptyTodo({patchState}: StateContext<TodoStateModel>): void {
    patchState({todoList: []});
  }
}

The @State decorator allows us to define the initial state of the state container.

The functions preceded by the @Action annotation are associated with an action and will be executed when triggered.

Let's take a closer look at the more complex `addTodo()` function to understand its components:

First, it takes two parameters:

{patchState, getState}: StateContext<TodoStateModel}, which provides patchState() and getState() functions to interact with the state defined in the same file.
{newTodo}: AddTodo, which allows us to access data from the triggered action.

As mentioned earlier, the state is immutable. To modify the value of one or more state elements, NGXS provides the patchState() function. Here's an example of how it's used:

patchState({todoList: [...getState().todoList, newTodo]});

This function enables developers to specify parameters only for the fields they intend to modify, without needing to create a copy of the entire state.

To allow our component to access the `todoList` value from the state, we can add a getter function. Therefore, the `todo.state.ts` file is updated as follows:

import {Action, Selector, State, StateContext} from '@ngxs/store';
import {AddTodo, EmptyTodo} from './todo.actions';

export interface TodoStateModel {
  todoList: string[];
}

@State<TodoStateModel>({
  name: 'todo',
  defaults: {
    todoList: [],
  }
})
export class TodoState {

  @Selector()
  static getTodoList(state: TodoStateModel): string[] {
    return state.todoList;
  }

  @Action(AddTodo)
  addTodo({patchState, getState}: StateContext<TodoStateModel>, {newTodo}: AddTodo): void {
    patchState({todoList: [...getState().todoList, newTodo]});
  }

  @Action(EmptyTodo)
  emptyTodo({patchState}: StateContext<TodoStateModel>): void {
    patchState({todoList: []});
  }
}

As you can observe, we have added the getTodoList() function, which takes the state as a parameter and is annotated with @Selector().

Whenever the value of todoList changes, the code within the selector function is executed, and any component that listens to todoList through getTodoList() will automatically receive the updated value.

As mentioned earlier, this function acts as a decorator for the returned value. Therefore, if you decide to sort todoList in alphabetical order within the selector, each component listening to todoList through this function will receive the sorted list.

To complete the loop, we need to return to our App component to allow it to access the value of todoList from the state using the newly created selector. To achieve this, we add a new variable in our component preceded by the @select() annotation, with the selector function as the parameter.

Here is the final version of `app.component.ts`:

import { Component } from '@angular/core';
import {Select, Store} from '@ngxs/store';
import {AddTodo, EmptyTodo} from '../store/todo.actions';
import {TodoState} from '../store/todo.state';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @Select(TodoState.getTodoList) todoList$?: Observable<string[]>;

  newTodo = '';

  constructor(private readonly store: Store) {}

  onAddTodo(): void {
    if (this.newTodo.length > 0) {
      this.store.dispatch(new AddTodo(this.newTodo));
    }
    this.newTodo = '';
  }

  onEmptyList(): void {
    this.store.dispatch(new EmptyTodo());
  }
}

Conclusion:

🥳🙌👏Congratulations! You have successfully learned how to set up and utilize NGXS. Your next task, should you decide to accept it, is to adapt the example we have worked on to meet the requirements of your own project.

For further information on NGXS, you can refer to the official documentation, available HERE.

Well done, and best of luck with your NGXS implementation! 💫👋👋

NGXS State Management: Beginner's Guide.

seif hassan — Tue, 27 Jun 2023 10:21:08 +0000

Discover the simplicity of handling the state of your #Angular application through #NGXS and grasp the knowledge of integrating NGXS.

State Management

State Management involves utilizing a Design Pattern to effectively utilize a single data source across various components of an application. This approach offers advantages like data reliability, simplified code maintenance, and more.

NGXS

NGXS is an Angular-centric State Management Pattern that serves as a centralized data source for your application's state, offering straightforward implementation. In my view, NGXS is easier to adopt compared to NGRX

In NGXS, there are four key concepts to incorporate:

Store

The store in NGXS acts as a central state manager, allowing for action dispatching and enabling the selection of specific data slices from the global state.

Actions

Actions in NGXS represent specific tasks or operations that can be performed to achieve desired outcomes. For instance, we can dispatch a "Get Books" action to retrieve books. When defining actions, it is necessary to specify a type that describes the nature of the action.

State

States in NGXS are responsible for defining the container that holds the application's state. It is possible to have various fundamental states that are commonly utilized in applications, such as:

1.✌️ An initial state
2.🔃 A loading state
3.👎 An error state
4.☑️ A success state

Select

Selects in NGXS are functions that enable us to retrieve specific data from our store. There are two approaches to perform this:

Using decorators:

export class NameYourComponent {

  @Select(TodosState) todos$: Observable<Todos[]>;
}

Using store selection functions:

export class NameYourComponent {
todos$: Observable<Todos[]>;

  constructor(private _store: Store) {
    this.todos$ = this._store.select(state => state.todos.todos);
  }
}

With a fundamental understanding of State Management, NGXS, and its underlying concepts, we are now ready to apply it in a practical application!

To begin, install the necessary dependencies by following these steps:

(NGXS): Install on the project:

npm i @ngxs/store

Helper plugins

devtools plugin

npm i @ngxs/devtools-plugin

To Use it Install this Extension

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=pt

logger plugin

npm install @ngxs/logger-plugin --save

Or if you are using yarn:

yarn add @ngxs/logger-plugin

Now, we just have to add the module to our imports in the @NgModule of our application like this:

import {NgxsLoggerPluginModule} from '@ngxs/logger-plugin';

@NgModule({
  imports: [
    ...
    NgxsLoggerPluginModule.forRoot({
       disabled: environment.production
     }),
  ],
  ...
})
export class AppModule { }

Part Two..