All Projects → loreanvictor → rxdeep

loreanvictor / rxdeep

Licence: MIT License
rxjs deep state management

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to rxdeep

Platform
Reactive libraries for Angular
Stars: ✭ 7,020 (+14836.17%)
Mutual labels:  reactive, rxjs, state-management
Ayanami
🍭 A better way to react with state
Stars: ✭ 129 (+174.47%)
Mutual labels:  reactive, rxjs, state-management
juliette
Reactive State Management Powered by RxJS
Stars: ✭ 84 (+78.72%)
Mutual labels:  reactive, rxjs, state-management
bassdrum
reactive, type safe components with preact and rxjs.
Stars: ✭ 44 (-6.38%)
Mutual labels:  reactive, rxjs
redrock
Typesafe, reactive redux
Stars: ✭ 14 (-70.21%)
Mutual labels:  reactive, rxjs
mst-effect
💫 Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.
Stars: ✭ 19 (-59.57%)
Mutual labels:  rxjs, state-management
vuse-rx
Vue 3 + rxjs = ❤
Stars: ✭ 52 (+10.64%)
Mutual labels:  rxjs, state-management
deep-state-observer
State library for high performance applications.
Stars: ✭ 25 (-46.81%)
Mutual labels:  reactive, deep-state
space-state
Demo app for Subjecting State to Good Behavior
Stars: ✭ 46 (-2.13%)
Mutual labels:  rxjs, state-management
agile
🌌 Global State and Logic Library for JavaScript/Typescript applications
Stars: ✭ 90 (+91.49%)
Mutual labels:  reactive, state-management
aurelia-hoc-store
An Aurelia application showing the use of higher order components and a single state approach.
Stars: ✭ 20 (-57.45%)
Mutual labels:  rxjs, state-management
rxrest
Reactive rest library
Stars: ✭ 33 (-29.79%)
Mutual labels:  reactive, rxjs
reactive-states
Reactive state implementations (brainstorming)
Stars: ✭ 51 (+8.51%)
Mutual labels:  reactive, state-management
ngx-mobx
Mobx decorators for Angular Applications
Stars: ✭ 14 (-70.21%)
Mutual labels:  rxjs, state-management
ng-effects
Reactivity system for Angular. https://ngfx.io
Stars: ✭ 46 (-2.13%)
Mutual labels:  rxjs, state-management
reactive-graphql
A GraphQL implementation based around RxJS, very well suited for client side only GraphQL usage
Stars: ✭ 58 (+23.4%)
Mutual labels:  reactive, rxjs
drawer
A touch-enabled drawer component for the modern web.
Stars: ✭ 26 (-44.68%)
Mutual labels:  reactive, rxjs
whatsup
Reactive framework, simple, fast, easy to use!
Stars: ✭ 115 (+144.68%)
Mutual labels:  reactive, state-management
Documentation
How does it all fit together?
Stars: ✭ 177 (+276.6%)
Mutual labels:  reactive, state-management
Vue Class Store
Universal Vue stores you write once and use anywhere
Stars: ✭ 243 (+417.02%)
Mutual labels:  reactive, state-management

banner

npm i rxdeep

RxDeep provides fast and precise reactive state management in JavaScript / TypeScript, in a flexible and unopinionated manner. Make changes at any point on the state tree, and listen to changes on particular parts of your tree, with a precision emission system that ensures you only get values when something has truly changed.

👉 Read the docs for more info.



Example Usage

▷ Create a state object:

import { state } from 'rxdeep';

const s = state([ { name: 'John' }, { name: 'Jack' }, { name: 'Jill' } ]);

▷ Listen to changes on 'name' property of index 1 on the list:

s.sub(1).sub('name').subscribe(console.log);     // --> logs `Jack`

▷ You can modify the top-level state:

s.value = [ { name: 'Julia' }, ...state.value ]; // --> logs `John`, since `John` is index 1 now

▷ Or mid-level states:

s.sub(1).value = { name: 'Josef' };              // --> logs `Josef`

▷ Or another sub-state with the same address:

s.sub(1).sub('name').value = 'Jafet';            // --> logs `Jafet`

RxJS interop:

import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

interval(1000)
.pipe(map(i => ({ name: `Jarvis #${i}`})))
.subscribe(s.sub(1));                            // --> logs `Jarvis #0`, `Jarvis #1`, `Jarvis #2`, ...
import { debounceTime } from 'rxjs/operators';

s.sub(1).pipe(debounceTime(1000)).subscribe(console.log); // --> debounces changes for 1 second

👉 Learn more.



UI Frameworks

RxDeep is completely framework agnostic. It is also by no means limited to use on frontend (though that is understandably most common use-case). Due to it being based on RxJS and having high interop with it, you can easily use it anywhere that you can use RxJS.

Use with React

Use with Angular

Use with Vue.js

Because of its precise change emissions, using RxDeep in conjuction with popular UI frameworks should actually speed them up (since it results in less burden for the underlying change detection mechanisms of these frameworks).

👉 Learn more.



Prior Work

RxDeep is not necessarily a replacement / alternative to many existing state management libraries. Typically these libraries provide / enforce some particular patterns which might or might not be useful to a particular application, while RxDeep avoids any such constraints, instead focusing on providing a performant and precise reactive state tree.

Here is how RxDeep compares / relates to some of the most well-known state management libraries:


Redux

Redux is a particular state management pattern (and a library providing it), while RxDeep is not. You actually can implement the Redux pattern using RxDeep state-trees if you so choose to.

Redux as a library doesn't have a concept of precision, i.e. you cannot listen to changes on a particular part of the state-tree in isolation. This is simply because Redux was designed primarily to be coupled with React, and so delegates figuring actual scope of changes to its Virtual DOM mechanism.

In contrast, precision is the main feature of RxDeep, which means surgically precise changes reach the final UI layer. With RxDeep the scope of each change is computed much more efficiently on the data layer (on the state-tree itself), instead of it being passed down to some external underlying library.


MobX

RxDeep and MobX share some core design philosophies in terms of being unopinionated reactive state management solutions. The main difference is MobX's implicit approach for automatically deducing state / expression dependencies, while RxDeep relies on the power of RxJS for explicitly defining / manipulating streams.

This brings much more fine grained control and extensibility, at the expense of face-value learnability (as RxJS does seem more complicated to newcomers). However in practice MobX syntax (e.g. computed values), doesn't differ much from the equivalent RxJS syntax (e.g. the map pipe). In fact, MobX's implicit deduction approach raises implicit constraints and considerations, while the explicit approach of RxJS avoids that, and the actual added complexity of RxJS kicks in for operations beyond the scope of MobX.


Focal

Amongst mentioned libraries, RxDeep shares most concepts and ideas with Focal. Focal, however, is specifically designed specifically to work with React, while RxDeep is completely framework agnostic. This also means that similar to Redux, precision is not a priority for Focal, while it is the main focus of RxDeep.



Build Status Code Coverage Minzipped Size NPM Version Code Quality License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].