TsRT: Store
State management tool on top of great RxJS.
Usage
Note! This package uses RxJS, thus any rxjs operators and knowledge could and should be used to play with state.
Prepare State
It is necessary to provide State
interfaces for better type safety and TS intellisense while using set
and get
methods.
interface IUser { id: number; name: string }
interface ITodo { id: number; title: string }
interface IState {
user: IUser;
todos: ITodo[];
}
Create store
import { Store } from '@tsrt/store';
export const store = new Store<IState>();
Listen for changes
import { store } from 'path/to/store';
store.get('user')
.subscribe((user) => { /* Get notified here on any user updates */ })
store.get('user.name')
.subscribe((userName) => { /* Get notified here on only user.name updates */ })
store.get('todos')
.subscribe((todos) => { /* Get notified here on any todos updates */ })
store.get('todos.1')
.subscribe((secondTodo) => { /* Get notified here on only second todo updates */ })
store.get('todos.1.title')
.subscribe((secondTodoTitle) => { /* Get notified here on only second todo.title updates */ })
Selectors
store.get('user')
.select((user) => ({ pk: user.id, firstName: user.name }))
.subscribe((user) => { /* Get notified here on any user updates */ })
store.get('todos')
.select((todo) => todo.id)
.subscribe((todoIds) => { /* Get notified here on only todos updates, each value will be `number[]` (todo.id[]) */ })
RxJS usage examples
const todos$ = store.get('todos');
const todosTotal$ = todos$.pipe(map((val) => val.length));
todos$
.pipe(
withLatestFrom(todosTotal$)
)
.subscribe(([todos, total]) => { /* Get notified here on any todos updates. Receive todos and its total count */ })
todos$
.pipe(
map((val) => val.filter((todo) => todo.id % 2 !== 0)),
)
.subscribe((todos) => { /* Get notified here on any todos updates. Leave only todos with even id */ })
// And more ...
Provide test values
store.set('user', { id: 1, name: 'Me' });
store.set('todos', [{ id: 1, title: 'First Todo' }, { id: 2, title: 'Second Todo' }]);
store.get('todos.1.title').set('Updated Second Todo Title');
store.set('todos.1.title', 'Updated Again Second Todo Title');
Angular Example (optional)
assign
option
export interface IStoreOptions {
/**
* Whether to assign new object into existing in store or just replace it.
*
* @example
* const user = new User({ id: 1, name: 'Me' });
* const store = new Store({ user });
*
* // If `assign.object` === false
* store.get('user').set({ name: 'You })
* store.state.user // { name: 'You' }
*
* // If `assign.object` === true
* store.get('user').set({ name: 'You })
* store.state.user // User { id: 1, name: 'You' }
*
* @property [object] - Defines whether to assign when updating object values. @default false.
* @property [array] - Defines whether to assign when updating array values. @default false.
*/
assign?: {
object?: boolean;
array?: boolean;
};
/**
* Wherther to use strict rule for deep equality via JSON.stringify for distinctUntilChanged by key
* This will prevent extra event firing if Object link changed but actual value is the same.
*
* @default false.
*/
strictDistinct?: boolean;
}
Supported versions
Version | Supported |
---|---|
2.x | |
1.x | |
0.x |
Disclaimer
For quite long time there was quite frequent necessity to use some centralized store, but without big complexity and overhead, which is provided by popular modern tools, such as NgRX, NgXS, Redux, etc.
This is a bit enhanced revision of already used and existing Store, including some useful modern APIs and still tiny solution without any boilerplate.
License
This project is licensed under the terms of the MIT license.