Independent Search Component Akita Store

category--api.service.ts

import { Injectable } from '@angular/core';
import { categoriesMock } from './categories-mock';
import { of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CategoryApiService {
  search() {
    return of(categoriesMock)
  }
}

category--categories-mock.ts

import { CategoryModel } from './model';

export const categoriesMock: CategoryModel[] = [
  {id: 1, name: 'Hobbies'},
  {id: 2, name: 'Garening'},
  {id: 3, name: 'Home Appliances'},
  {id: 4, name: 'Consumer Electronics'},
  {id: 5, name: 'Clothing'},
  {id: 6, name: 'Gadgets'},
];

category--model.ts

export class CategoryModel {
  id: number;
  name: string;
}

category--store.query.ts

import { Injectable } from '@angular/core';
import { QueryEntity } from '@datorama/akita';
import { CategoryStore, CategoryState } from './store';
import { CategoryModel } from './model';

@Injectable({
  providedIn: 'root'
})
export class CategoryQuery extends QueryEntity<CategoryState, CategoryModel> {

  constructor(protected store: CategoryStore) {
    super(store);
  }

}

category--store.service.ts

import { Injectable } from '@angular/core';
import { ID } from '@datorama/akita';
import { CategoryStore } from './store';
import { CategoryModel } from './model';
import {tap} from 'rxjs/operators';
import { CategoryApiService } from './api.service';

@Injectable({ providedIn: 'root' })
export class CategoryStoreService {

  constructor(private categoryStore: CategoryStore,
              private categoryApiService: CategoryApiService) {
  }

  search() {
    return this.categoryApiService.search()
      .pipe(
        tap(categories => this.categoryStore.set(categories))
      );
  }
}

category--store.ts

import { Injectable } from '@angular/core';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
import { CategoryModel } from './model';

export interface CategoryState extends EntityState<CategoryModel> {}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'category' })
export class CategoryStore extends EntityStore<CategoryState, CategoryModel> {}