rxbox
v0.7.1
Published
state container for Angular
Downloads
941
Maintainers
Readme
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()