Skip to main content

What are the main entities in Akita?

AngularJunior~1 min read
Suggest an edit

Akita has just three main entities, and that's enough to fully manage state.

1. Store

Stores data and is responsible for updating it.

  • This is a class that holds the entire state.
  • You define how it looks yourself (object, array, dictionary).
  • It changes through store.update(), store.set(), store.add(), store.remove(), and so on.

Example:

ts
@StoreConfig({ name: 'todos' }) @Injectable() export class TodosStore extends Store<TodoState> { constructor() { super({ todos: [] }); // initial state } }

2. Query

Responsible for reading data from the Store.

  • Subscribing to todos$, activeTodo$, count$, and so on.
  • You can write your own methods: selectById(id), isEmpty(), and so on.

Example:

ts
@Injectable() export class TodosQuery extends Query<TodoState> { todos$ = this.select(state => state.todos); constructor(protected store: TodosStore) { super(store); } }

3. Service

Business logic: API requests, calling Store methods.

  • This is where you call http.get(), store.update(), and so on.
  • Service isn't part of Akita itself, but it's the commonly accepted structure.

Example:

ts
@Injectable() export class TodosService { constructor(private todosStore: TodosStore) {} add(todo: Todo) { this.todosStore.update(state => ({ todos: [...state.todos, todo] })); } }

Additionally (if needed):

  • EntityStore - a special kind of Store for collections with ids and entities.
  • UI Store - for storing UI state (for example, loading, selectedId).
  • Plugins - for example, for devtools, undo/redo, persist.

Conclusion:

Store - saves the data. Query - hands data to components. Service - manages actions.

Akita is simple: three parts, and you already have a full-fledged reactive store.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit