rxbox

Simple state container for Angular application

RXBox let's you handle your Application state in one place. You retain the responsibility for updating the state to your app. It gives you an easy API to deal with your app's state.

Getting started

Install rxbox using npm.

npm install rxbox --save

Add RXBox to your main NgModule providers array

providers: [
  { provide: RXBox, useClass: RXBox }
]

import it into a component

import { RXBox } from 'rxbox'

Inject it to your constructor

 constructor(
        private store: RXBox,
    ) {}

Now you can start interacting with the store from your component.

API

assignState(stateChanges)

assignState push data to the store

*Note if you have multiple subscribers open, and you are 'assignState' inside one of the callback, it is possible that you will prevent one of the subscribers to run. Because the 'watch' and 'select' methods run only if the key that you subscribe to is in the last change of the store. Therefore if you are not sure, it is best to use 'assignStateAsync' over 'assignState'

 this.store.assignState({ foo: bar })

assignStateAsync(stateChanges): Promise

assignStateAsync push data to the store only after all I/O events in the current snapshot are processed

 await this.store.assignStateAsync({ foo: bar })

clearState()

clearState will completely remove the current state and will replace it with empty object

 this.store.clearState()

getState(passByReference [optional] )

Return copy of current app state object. if not sending true to passByReference it will return a copy of the state

 this.store.getState()

select(key, subscriberName [optional], passByReference [optional] )

Doing exactly the same thing as watch but also return the previous value if any. Note that if the current value in the store is new, watch will also behave the same way as select and will fire instantly the data

You can add name to subscriber (subscriberName) and then see if they open from console with RXBox.subscribers

this.store.select('foo').subscribe(
    val => {
        console.log('change in foo value',  val)
    }
)
// nested key watch
this.store.select('foo.bar').subscribe(
    val => {
        console.log('change in bar value',  val)
    }
)

debug

If you want to use the state history feature, you have to first set debug to true

this.store.debug = true

sessionStorage

save the store to the sessionStorage

this.store.saveToSessionStorage = true

this.store.saveToSessionStorage = true

localStorage

save the store to the localStorage

this.store.saveToLocalStorage = true

Get data from the storage

to restore from localStorage or from sessionStorage use getStoreFromSessionStorage() or getStoreFromLocalStorage() don't try to get the value from the storage yourself without the getters (the storage also store metadata)

getHistory()

Show the history of the state (first you have to set debug to true)

this.store.getHistory()

clearHistory()

Remove all state history

this.store.clearHistory()