MiniRx Store 4 beta has been released.
What's new?
- Refactor to Nx
- Even more lightweight
tapResponse
operator (handle API response inFeatureStore.effect
)mapResponse
operator (handle API response in Redux Effects)- Many Feature Store instances with the
multi: true
config FeatureStore.effect
: the returned function accepts also an Observable as argument- Full Ivy support in Angular
- Many more internal improvements
Read more in the CHANGELOG about the changes and the very few BREAKING CHANGES.
npm i mini-rx-store@beta
Install the Angular Integration if you are using Angular:
npm i mini-rx-store-ng@beta
The Angular Integration requires now Angular@12.
MiniRx Store provides Reactive State Management for JavaScript and TypeScript applications. It is a global, application-wide solution to manage state and is powered by RxJS. MiniRx will help you to manage state at large scale (with the Redux pattern), but it also offers a simple form of state management: Feature Stores.
- ๐ค Learn about MiniRx on the docs site
- ๐ See MiniRx in action on StackBlitz
- RxJS powered global state management
- State and Actions are exposed as RxJS Observable
- Store (Redux API):
- Actions
- Reducers
- Meta Reducers
- Memoized Selectors
- Effects
- Support for ts-action: Create and consume actions with as little boilerplate as possible
- FeatureStore: Update state without actions and reducers:
setState()
update the feature stateselect()
read feature stateeffect()
run side effects like API calls and update feature stateundo()
easily undo setState actionsget state()
imperatively get the current feature state
- Extensions:
- Redux Dev Tools Extension: Inspect State with the Redux Dev Tools
- Immutable Extension: Enforce immutability
- Undo Extension: Undo dispatched Actions
- Logger Extension: console.log the current action and updated state
- Framework agnostic: MiniRx works with any front-end project built with JavaScript or TypeScript (Angular, Svelte, React, Vue, or anything else)
- TypeScript support: The MiniRx API comes with TypeScript type definitions
- Angular Integration: Use MiniRx Store the Angular way:
StoreModule.forRoot()
,StoreModule.forFeature()
, ...
- The store is a single object which holds the global application state. It is the "single source of truth"
- State is exposed as RxJS Observable
- State has a flat hierarchy and is divided into "feature states" (also called "slices" in Redux world)
- For each "feature state" we can decide to use the Redux API with actions and a reducer or the Feature Store API with
setState
- State is read-only (immutable) and can only be changed by dispatching actions (Redux API) or by using setState (Feature Store API)
Install from the NPM repository using npm:
npm install mini-rx-store
Install the RxJS peer dependency:
npm install rxjs
Let's dive into some code to see MiniRx in action
MiniRx supports the classic Redux API with registering reducers and dispatching actions. Observable state can be selected with memoized selectors.
import {
Action,
Store,
configureStore,
createFeatureSelector,
createSelector
} from 'mini-rx-store';
import { Observable } from 'rxjs';
// 1.) State interface
interface CounterState {
count: number;
}
// 2.) Initial state
const counterInitialState: CounterState = {
count: 1
};
// 3.) Reducer
function counterReducer(
state: CounterState = counterInitialState,
action: Action
): CounterState {
switch (action.type) {
case 'inc':
return {
...state,
count: state.count + 1
};
default:
return state;
}
}
// 4.) Get hold of the store instance and register root reducers
const store: Store = configureStore({
reducers: {
counter: counterReducer
}
});
// 5.) Create memoized selectors
const getCounterFeatureState = createFeatureSelector<CounterState>('counter');
const getCount = createSelector(
getCounterFeatureState,
state => state.count
);
// 6.) Select state as RxJS Observable
const count$: Observable<number> = store.select(getCount);
count$.subscribe(count => console.log('count:', count));
// 7.) Dispatch an action
store.dispatch({ type: 'inc' });
// OUTPUT: count: 1
// OUTPUT: count: 2
FeatureStore
allows us to manage feature state without actions and reducers.
The API of a FeatureStore is optimized to select and update a feature state directly with a minimum of boilerplate.
import { FeatureStore } from 'mini-rx-store';
import { Observable } from 'rxjs';
// 1.) State interface
interface CounterState {
count: number;
}
// 2.) Initial state
const counterInitialState: CounterState = {
count: 11
};
export class CounterFeatureStore extends FeatureStore<CounterState> {
// Select state as RxJS Observable
count$: Observable<number> = this.select(state => state.count);
constructor() {
super('counterFs', counterInitialState);
}
// Update state with `setState`
inc() {
this.setState(state => ({ ...state, count: state.count + 1 }));
}
}
Use the "counterFs" feature store like this:
import { CounterFeatureStore } from "./counter-feature-store";
const counterFs = new CounterFeatureStore();
counterFs.count$.subscribe(count => console.log('count:', count));
counterFs.inc();
// OUTPUT: count: 11
// OUTPUT: count: 12
โน The state of a Feature Store becomes part of the global state
Every new Feature Store will show up in the global state with the corresponding feature key (e.g. 'counterFs').
store.select(state => state).subscribe(console.log);
//OUTPUT: {"counter":{"count":2},"counterFs":{"count":12}}
Play with the basic tutorial on Stackblitz: MiniRx Store - Basic Tutorial
Demos with working example:
- Angular MiniRx Demo on Github
- See it live here
- Svelte MiniRx Demo on Github
- See it live here
These popular Angular demo applications show the power of MiniRx:
- Angular Tetris with MiniRx on Github
- Angular Jira Clone using MiniRx on Github
- Angular Spotify using MiniRx on Github
More about MiniRx:
- Introducing MiniRx - Scalable reactive state management
- MiniRx Feature Store vs. NgRx Component Store vs. Akita
These projects, articles and courses helped and inspired us to create MiniRx:
- NgRx
- Akita
- Observable Store
- RxJS Observable Store
- Juliette Store
- Basic State Management with an Observable Service
- Redux From Scratch With Angular and RxJS
- How I wrote NgRx Store in 63 lines of code
- NGRX VS. NGXS VS. AKITA VS. RXJS: FIGHT!
- Pluralsight: Angular NgRx: Getting Started
- Pluralsight: RxJS in Angular: Reactive Development
- Pluralsight: RxJS: Getting Started
MIT
Thanks goes to these wonderful people (emoji key):
Pieter Van Poyer ๐ป |
Florian Spier ๐ป ๐ค |
Carsten ๐จ |
This project follows the all-contributors specification. Contributions of any kind welcome!