T-rex
A simplified application state container based on the component/service paradigm
Who am I
T-rex is a transactional state container for SPA applications like Angular & React. It relies on Typescript syntax for intercepting component calls and ZoneJS mechanism for tracking asynchronous activities. While using T-rex inside Angular/React applications is simple you can also use T-rex in any JavaScript application
Installation
$ npm install t-rex
Getting Started
First, define application state
interface AppState
Then, define a service which manages a single aspect of the application state. In our case this is the counter field
class CounterService
Then, create the backing appStore instance and register each service into it
const counterService = new const appStore = new appStore.init;
Inside your component you deal with a specific service instance (like, CounterService) and forget about the backing appStore instance.
class ToolbarComponent }
Other components can listen to the change event
class CounterComponent
The power of T-rex resides inside the ability to compose methods from different services but still keep a single transaction
For example, we want to maintain a counter which counts the number of end user activities. Every time the user logs-in or logs-out we want to increment the activity counter
interface AppState interface AuthState interface CountersState class CountersService class AuthService class RootService @ } const countersService = new const authService = new const rootService = new const appStore = new appStore.init;
Only if both inc() and login() complete successfully then the backing appStore is updated and all subscribers are notified
T-rex support asynchronous operations. Continuing with above example we can return a promise from an action and the transaction decorator monitors the completeness of the action and only then updates the backing appStore
@
Or, in case you are using async/await syntax
@async
Samples
Inside the repository you may find the samples directory which contains samples for both Angular1 and Angular2. Just run the following commands inside each directory sample
npm installnpm start
License
MIT