What is Akita?

AngularJunior~1 min read

Akita is a library for managing state in Angular, an alternative to NgRx and NGXS, with an emphasis on simplicity, structure, and an object-oriented approach.

The main idea:

Akita = reactive state + classes + less boilerplate code.

It helps you:

store data (in a store),
update it centrally (through methods),
subscribe to changes (through select()).

Main elements of Akita:

Store
- a class where the state lives
- you set the initial state and manage it
Query
- a class for reading data from the store
- convenient for getting selectName(), selectCount(), and so on
Service
- business logic: loading from an API, updates, deletions, and so on
- calls store methods

Example:

export interface Todo {
  id: number;
  title: string;
}

@StoreConfig({ name: 'todos' })
@Injectable()
export class TodosStore extends Store<Todo[]> {
  constructor() {
    super([]);
  }
}

@Injectable()
export class TodosQuery extends Query<Todo[]> {
  todos$ = this.select(); // subscribe to all todos

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

@Injectable()
export class TodosService {
  constructor(private todosStore: TodosStore) {}

  add(todo: Todo) {
    this.todosStore.update(state => [...state, todo]);
  }
}

How it differs from NgRx:

	Akita	NgRx
Approach	Class-based, simple	Functional, strict
Reducers	None	Required
Actions	Not required	Required
RxJS	Used, but lightly	Used heavily
Side effects	In services	Through `Effects`

Conclusion:

Akita is a lightweight, easy-to-understand alternative to NgRx. If you want to manage state without unnecessary complexity, with good structure, Akita can be an ideal fit.

Short Answer

Interview ready

Premium

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

What is Akita?

#The main idea:

#Main elements of Akita:

#Example:

#How it differs from NgRx:

#Conclusion: