How to add State Management in Angular project using Akita

  • Post category:angular
  • Reading time:4 mins read

Create an Angluar Project

Step 1: Create a folder and open command prompt (Make sure you have angular environment in your device) then paste this command line in your terminal.

npm install -g @angular/cli

Step 2: After installing Angular CLI , run this command line given bellow.

ng new my-first-project

You can also follow this official ANGULAR  page for creating a new project in Angular.

Step 3: Now Open the project in Visual Studio Code & Go to New Terminal

Step 4: Paste this command line in the terminal and press Enter.

npm install @datorama/akita

or you can follow this link for installing Akita in your project.

Step 5: Now go to src –> app from your vs code. Right click on the app folder and create a new folder named Store.

Step 6: Right click on the Store folder and create a new file named Session.Store.ts and paste this code.

import { Injectable } from '@angular/core';
import { EntityStore, Store, StoreConfig } from '@datorama/akita';

export interface User {
   id: number;
   token: string;
   name: string;
}
@Injectable({
  providedIn: 'root'
})

@StoreConfig({ name: 'session', idKey: 'id' })
export class SessionStore extends EntityStore<User> {
  constructor() {
    super() ;
  }
}

Step 7: Right click on the Store folder and create another new file named Session.Query.ts and paste this code.

import { Injectable } from '@angular/core';
import { Query, QueryEntity } from '@datorama/akita';
import { SessionStore, User } from './Session.Store';

@Injectable({
    providedIn: 'root'
  })

export class SessionQuery extends QueryEntity<User> {
  constructor(protected store: SessionStore) {
    super(store);
  }
}

Step 8: Now go to app.component.ts file and paste this following code

import { Component } from '@angular/core';
import { SessionQuery } from './Store/Session.Query';
import { SessionStore, User } from './Store/Session.Store';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'internal-audit';
   constructor(protected store: SessionStore, query: SessionQuery) {
    // Create a data
    const user : User =
    {
      id : 1,
      token : '20220104aniks.xyz@#$%!',
      name : 'Anik'
    };

    store.upsert(user.id,user);
    query.getAll();
    console.log('GETALL',  query.getAll());
  }
}

Step 9: Now go to terminal and paste this command to run the project.

npm start
Step 10: Now go to browser and run http://localhost:4200/  and go to inspect –> console
Here you can see a data is inserted into a store and get the data from the store.Here we have use upsert method for inserting data into a store which is provided by Akita. This method  is insert data if there is no record into store, if there is a data already there then it will update the data. And to see all the data from the store we used getAll() method.
 store.upsert(user.id,user);
 query.getAll();

That’s All.

 

Post Views: 501

Leave a Reply