# Introduction

![](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-ML-_x6pGjjn-ywf-yR-%2F-ML0SMhBvx_M9VHYM-iq%2FAJS%20Logo%20Full%20-%20Padded.png?alt=media\&token=5875624c-9eea-46f6-80d1-5487906806f7)

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**](https://docs.activejs.dev/activejs/fundamentals/units) 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](https://docs.activejs.dev/activejs/fundamentals/units/numunit), one of the reactive data structures that ActiveJS provides. The [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit) 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](https://docs.activejs.dev/activejs/fundamentals/units/numunit) 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](https://docs.activejs.dev/activejs/fundamentals/units/numunit) can do so much more alone, and Redux is powerful in its own way. But it is what it is.

![Redux vs ActiveJS](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MJv31iWOnLCO37G0TJF%2F-MJvF07bHgk9u6k3NSQc%2FRedux%20vs%20ActiveJS.png?alt=media\&token=c381d6e2-59a9-4bd9-9ed5-09ba75028920)

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](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MJv31iWOnLCO37G0TJF%2F-MJvF5zhSD-B6xt0SVmo%2FNgRx%20vs%20ActiveJS.png?alt=media\&token=3bafc003-6bb8-4515-b6be-7113f6fd89ce)

## 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.](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MAsFH3yDU9S0O2wrt5E%2F-MAurwB-A0FWl-CvM3rN%2FVery%20High%20Level%20Data%20Flow%20\(1\).svg?alt=media\&token=b89c5e63-33d9-41c5-9873-371ede39ac76)

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. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.activejs.dev/activejs/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.