> For the complete documentation index, see [llms.txt](https://docs.activejs.dev/activejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.activejs.dev/activejs/master.md).

# Introduction

![](/files/-ML0SMhBvx_M9VHYM-iq)

ActiveJS strives to be a pragmatic, reactive state management solution for JavaScript apps.

ActiveJS' reactivity is based on [RxJS Observable](https://rxjs.dev/guide/observable), hence, you can take full advantage of [RxJS operators](https://rxjs.dev/guide/operators).

It's built around **reactive data structures** called [**Units**](/activejs/fundamentals/units.md) that resemble JavaScript's **native data structures** but are much more powerful.  All these feature-packed reactive data structures share the following qualities: 

* Observable value
* Reactive value mutation
* Type-safety
* Cache-enabled
* Optionally Immutable 
* Optionally Persistent

These Units help you share data among different parts of an app with minimum code and effort.\
Furthermore, ActiveJS helps in streamlining asynchronous data APIs like `XHR`, `fetch`, or third party abstractions like Angular's `HttpClient` or `axios`, etc.

## Installation

If you don't have [RxJS](https://rxjs.dev/guide/installation) installed already, you'll need to install it first `npm install rxjs`, and then

```bash
npm i @activejs/core
```

## Quick Example

This is how an implementation of a simple "counter" looks like, using a [NumUnit](/activejs/fundamentals/units/numunit.md), one of the reactive data structures that ActiveJS provides. The [NumUnit](/activejs/fundamentals/units/numunit.md) stores and provides a `number` value at all times ensuring the **type-safety**.

```typescript
// initialize a reactive data structure to store numbers
const counter = new NumUnit() // with default initial-value 0

// two pure functions to produce an appropriate new value
const increment = value => value + 1 
const decrement = value => value - 1

// subscribe for reactive value access, and log the value
counter.subscribe(value => console.log(value))
// immediately logs 0, and will log any future values

// increment
counter.dispatch(increment); // you'll see 1 in the console
// the pure function is called with the current value and
// the returned value is dispatched automatically

// decrement
counter.dispatch(decrement); // you'll see 0 in the console
// that's it our counter is complete

// you can also access the value directly
console.log(counter.value()) // logs 0
```

You never have to worry if the value of this **counter** is `number` or not, the [NumUnit](/activejs/fundamentals/units/numunit.md) will ensure that it's a `number`, it'll ignore any non-`number` value dispatch. We'll talk about it in detail later.

## Quick Comparisons

A "counter" implemented in vanilla **Redux** vs **ActiveJS**. \
It's not a fair comparison because a [NumUnit](/activejs/fundamentals/units/numunit.md) can do so much more alone, and Redux is powerful in its own way. But it is what it is.

![Redux vs ActiveJS](/files/-MJvF07bHgk9u6k3NSQc)

It's hard to  Compare with **NgRx** without involving Angular, but for argument's sake let's pretend that this stripped-down code is valid.

![NgRx vs ActiveJS](/files/-MJvF5zhSD-B6xt0SVmo)

## Quick Overview

The following data-flow diagram roughly shows where ActiveJS comes into play.\
ActiveJS holds the state and every other part of the application directly shares it without any obscure façade.

![A very high level data-flow diagram of an App using ActiveJS.](/files/-MAurwB-A0FWl-CvM3rN)

ActiveJS is fully [fuzz-tested](https://en.wikipedia.org/wiki/Fuzzing) with **99.99%** code-coverage.

ActiveJS is really small in size, and it's **tree-shakeable** too.\
Also, there're **no reducers, no middleware, and not even a store for that matter**.\
It's much simpler than that.