@lirx/store provides state management for creating maintainable, explicit applications through the use of
single state and actions in order to express state changes.
@lirx/store is extremely light and fast as opposed to classical Store library like
redux,
ngrx,
ngxs,
etc...
When should I use a Store for state management?
In particular, you might use a Store when you build an application with a lot of user interactions and multiple data sources, or when managing state in classes or global helpers are no longer sufficient.
Moreover, if you're working with Angular, React or rx-dom, using a Store is a good way to help you build large applications and keep a coherent state with it.
Example:
/* DEFINE STORE INTERFACES */
type IUser = Immutable<{
name: string;
}>
type IAppState = Immutable<{
users: ImmutableArray<IUser>;
}>;
/* INIT THE STORE */
const APP_STORE = createStore<IAppState>({
users: [],
});
/* ACTIONS */
const appendUser = createAction(APP_STORE, (state: IAppState, user: IUser): IAppState => {
return {
...state,
users: [...state.users, user],
};
});
/* SELECTORS */
const userCountSelector = createSelector((state: IAppState) => state.users.length);
const userCount$ = mapState(APP_STORE, userCountSelector);
/* MY APP */
userCount$((count: number) => {
console.log('user count:', count);
});
// outputs: 0
appendUser({ name: 'Alice' }); // outputs: 1
appendUser({ name: 'Bob' }); // outputs: 2yarn add @lirx/store
# or
npm install @lirx/store --saveThis library supports:
- common-js (require): transpiled as es5, with .cjs extension, useful for old nodejs versions
- module (esm import): transpiled as esnext, with .mjs extension (requires node resolution for external packages)
In a node environment the library works immediately (no extra tooling required), however, in a browser environment, you'll need to resolve external imports thought a bundler like snowpack, rollup, webpack, etc... or directly using skypack: https://cdn.skypack.dev/@lirx/store