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

# Introduction

{% hint style="warning" %}
Note that API is on the prototype stage and can be changed dramatically without backward compatibility support!
{% endhint %}

### Overview

Reactive is a package that implements "Observer" pattern for JavaScript. Purpose is to give set of tools for comfortable monitoring of value changes, tranformations, subscriptions handling. 

### Capabilities

Value observation can be achieved with 3 main classes:

1. Bus - transporter used for sending data to its subscribers, doesn't store any value.
2. Reactive - shell that stores some value which can be updated over time. Informs subscribers about each update.
3. Vault - shell that stores array of values. Provides api for array modification and observing 4 event types: change, add, delete, update. 

Value transformation uses "Pipeline" pattern which means that you can use multiple handlers to process data step by step.

Subscription handling is done with "Hub" class, which can store multiply subscriptions at the same time and control when they are attached to / detached from  the observable.

### Example

```typescript
import { Reactive, passIf, map } from '@taedr/reactive';
import { Hub } from '@taedr/utils';

const hub = new Hub();
/* "Reactive" instance with "10" as initial value. */
const reactive = new Reactive(10);
/* Pipeline with 2 handlers: 
   - passIf - will pass number further if it bigger than 2, if not will discard it.
   - map - will convert number into string and pass it further.
 */
const pipeline = reactive.pipe(
   passIf(number => number > 2),
   map(number => `Value is: ${number}`)
);
/* Storage for emitted values */
const strings: string[] = [];
/* Subscribing for "pipeline" emittions  */
pipeline.watch(hub, string => strings.push(string));
/* Changing "reactive" state 5 times */
for (let i = 0; i < 5; i++) {
   reactive.value = i;
}

hub.state = 'OFF';

console.log(strings); // [ 'Value is: 10', 'Value is: 3', 'Value is: 4' ]
```