State Management in Angular Using Akita
Tags: angular, javascript, programming
Published: 2022-02-18 12:52:36

### See how it's easy to manage your Angular application's state using Akita and learn how you can use Akita with Auth0's SDK to handle user-related functionalities. 

### <br>

## Intro

State management is a key component when building applications. There are various approaches by which we can manage the state in an Angular application, each with its pros and cons.
This blog post will focus on using Akita as our state management solution. We will look at how you can use Akita to manage your application's state by building a Recipe Admin Dashboard application. We will also learn how to secure the application using Auth0 and how it works with Akita.

## What Is Akita

[Akita](https://datorama.github.io/akita/) is a state management pattern based on object-oriented design principles.
Akita is built on top of RxJs, merging the multiple data stores concept from Flux, immutable updates from Redux, and data streams from RxJs to create the Observable Data Store model. Akita boasts an opinionated structure that forces developers to follow a fixed pattern that cannot be deviated from, encouraging a uniform implementation in your codebase.

## How Does Akita Work

Akita is made up of 4 main components - Store, Actions, Query, and Effects.

Akita uses the Redux concept of unidirectional data flow, where all application data goes through the same lifecycle. This unidirectional data flow makes the application's state more predictable and thus easier to understand. This flow only applies to the state management layer and is not to be confused with the unidirectional data flow of the presentation layer. The following diagram shows the state management lifecycle in Akita.

![Akita State Management Lifecycle Diagram](https://images.ctfassets.net/23aumh6u8s0i/7zfsEnAJdgfKJv34Xu6b61/1f53a405ff750b696b198887787103d4/01-akita-how-it-works.png)

### Store

The Store in Akita contains a single object containing the store state and acts as the application's single source of truth. It reflects the current state of the app. You can think of this as a client-side database.

### Actions

Actions express unique events that happen in our application. These events range from application lifecycle events, user interactions, to network requests. Actions are how the application communicates with Akita's store to tell it what to do.

### Query

Queries are similar to database queries. A query is responsible for querying or getting slices of the state from the Store. Queries are how our application listens to state changes.

### Effects

Effects handle the side effects of each Action. These side effects range from communicating with an external API via HTTP when a certain Action is dispatched to dispatching another Action to update another part of the State.

## Prerequisites

Angular requires an [active LTS or maintenance LTS](https://nodejs.org/about/releases) version of Node.js. Angular applications also depend on [npm packages](https://docs.npmjs.com/getting-started/what-is-npm) for many features and functions. To download and install npm packages, you need an npm package manager such as [npm](https://docs.npmjs.com/cli/install) or [yarn](https://yarnpkg.com/).

This project has a server-side component that has to run in parallel when running the Frontend. Follow the instructions in the [Api Express Typescript Menu repo](https://github.com/auth0-cookbook/api_express_typescript_menu). You can read more about setting up the server-side with Auth0 in this [blog post](https://auth0.com/blog/node-js-and-typescript-tutorial-secure-an-express-api/).

This tutorial focuses on how to use Auth0 with Akita. For more information on setting up Auth0 for Angular applications, follow the instructions on the [README](https://github.com/auth0-developer-hub/spa_angular_typescript_dashboard/blob/master/README.md#register-a-client-application-with-auth0) or refer to this [blog post](https://auth0.com/blog/complete-guide-to-angular-user-authentication/#Connect-Angular-with-Auth0).

## Getting Started Quickly

I created a demo application with the basic structure and components to help you implement the Akita-related part.

Clone the demo app and check out its starter branch:

```bash
git clone -b starter git@github.com:auth0-developer-hub/spa_angular_typescript_dashboard.git
```

Once you clone the repo, make `spa_angular_typescript_dashboard` your current directory:

```bash
cd spa_angular_typescript_dashboard
```

Install the project's dependencies:

```bash
npm i
```

Run the project locally:

```bash
npm run start
```

## Devtools

We will be using the [redux devtools](https://github.com/zalmoxisus/redux-devtools-extension/) extension for Chrome or Firefox for debugging store-related operations.

[Read more...](https://auth0.com/blog/state-management-in-angular-with-akita-1/?utm_source=content_synd&utm_medium=sc&utm_campaign=angular)