{"id":13847439,"url":"https://github.com/loreanvictor/rxdeep","last_synced_at":"2025-03-16T22:31:26.981Z","repository":{"id":40762262,"uuid":"275848008","full_name":"loreanvictor/rxdeep","owner":"loreanvictor","description":"rxjs deep state management","archived":false,"fork":false,"pushed_at":"2023-01-07T19:45:15.000Z","size":1877,"stargazers_count":58,"open_issues_count":10,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-20T00:46:50.900Z","etag":null,"topics":["deep-state","reactive","redux","rxjs","state-management"],"latest_commit_sha":null,"homepage":"https://loreanvictor.github.io/rxdeep/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loreanvictor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"loreanvictor"}},"created_at":"2020-06-29T15:01:34.000Z","updated_at":"2024-04-06T13:11:36.000Z","dependencies_parsed_at":"2023-02-07T23:16:05.579Z","dependency_job_id":null,"html_url":"https://github.com/loreanvictor/rxdeep","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frxdeep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frxdeep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frxdeep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frxdeep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loreanvictor","download_url":"https://codeload.github.com/loreanvictor/rxdeep/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221668623,"owners_count":16860692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deep-state","reactive","redux","rxjs","state-management"],"created_at":"2024-08-04T18:01:20.629Z","updated_at":"2024-10-27T11:28:17.035Z","avatar_url":"https://github.com/loreanvictor.png","language":"TypeScript","funding_links":["https://github.com/sponsors/loreanvictor"],"categories":["TypeScript"],"sub_categories":[],"readme":"![banner](/rxdeep-banner.png)\n\n```bash\nnpm i rxdeep\n```\n\n**RxDeep** provides [fast](https://loreanvictor.github.io/rxdeep/docs/performance) and [precise](https://loreanvictor.github.io/rxdeep/docs/precision) \nreactive state management in JavaScript / TypeScript, in a flexible and unopinionated manner. \nMake changes at any point on the state tree, and listen to changes on particular parts of your tree, \nwith a precision emission system that ensures you only get values when something has truly changed.\n\n[👉 Read the docs for more info.](https://loreanvictor.github.io/rxdeep/)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Example Usage\n\n▷ Create a state object:\n\n```ts\nimport { state } from 'rxdeep';\n\nconst s = state([ { name: 'John' }, { name: 'Jack' }, { name: 'Jill' } ]);\n```\n\n▷ Listen to changes on `'name'` property of index 1 on the list:\n```ts\ns.sub(1).sub('name').subscribe(console.log);     // --\u003e logs `Jack`\n```\n\n▷ You can modify the top-level state:\n```ts\ns.value = [ { name: 'Julia' }, ...state.value ]; // --\u003e logs `John`, since `John` is index 1 now\n```\n\n▷ Or mid-level states:\n```ts\ns.sub(1).value = { name: 'Josef' };              // --\u003e logs `Josef`\n```\n\n▷ Or another sub-state with the same address:\n```ts\ns.sub(1).sub('name').value = 'Jafet';            // --\u003e logs `Jafet`\n```\n\n▷ [RxJS](https://rxjs.dev) interop:\n```ts\nimport { interval } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\ninterval(1000)\n.pipe(map(i =\u003e ({ name: `Jarvis #${i}`})))\n.subscribe(s.sub(1));                            // --\u003e logs `Jarvis #0`, `Jarvis #1`, `Jarvis #2`, ...\n```\n```ts\nimport { debounceTime } from 'rxjs/operators';\n\ns.sub(1).pipe(debounceTime(1000)).subscribe(console.log); // --\u003e debounces changes for 1 second\n```\n\n[👉 Learn more.](https://loreanvictor.github.io/rxdeep/#quick-tour)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## UI Frameworks\n\n**RxDeep** is completely framework agnostic. It is also by no means limited to use on frontend (though that is understandably most common use-case).\nDue to it being based on [RxJS](https://rxjs.dev) and having high interop with it, you can easily use it anywhere that you can use RxJS.\n\n\u003cimg src=\"https://reactjs.org/favicon.ico\" width=\"16\"/\u003e [Use with React](https://loreanvictor.github.io/rxdeep/#react)\n\n\u003cimg src=\"https://angular.io/assets/images/favicons/favicon.ico\" width=\"16\"/\u003e [Use with Angular](https://loreanvictor.github.io/rxdeep/#angular)\n\n\u003cimg src=\"https://vuejs.org/images/logo.png\" width=\"16\"/\u003e [Use with Vue.js](https://loreanvictor.github.io/rxdeep/#vuejs)\n\nBecause of its precise change emissions, using **RxDeep** in conjuction with popular UI frameworks should actually speed them up (since\nit results in less burden for the underlying change detection mechanisms of these frameworks).\n\n[👉 Learn more.](https://loreanvictor.github.io/rxdeep/#ui-frameworks)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Prior Work\n\n**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\nany such constraints, instead focusing on providing a performant and precise reactive state tree.\n\nHere is how **RxDeep** compares / relates to some of the most well-known state management libraries:\n\n\u003cbr\u003e\n\n### [Redux](https://redux.js.org/)\n\nRedux is a particular state management pattern (and a library providing it), while **RxDeep** is not. You actually can implement\nthe Redux pattern using **RxDeep** state-trees if you so choose to.\n\nRedux 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.\nThis is simply because Redux was designed primarily to be coupled with React, and so delegates figuring actual scope of changes to its Virtual DOM\nmechanism.\n\nIn contrast, precision is the main feature of **RxDeep**, which means surgically precise changes reach the final UI layer.\nWith **RxDeep** the scope of each change is computed much more efficiently on the data layer (on the state-tree itself),\ninstead of it being passed down to some external underlying library.\n\n\u003cbr\u003e\n\n### [MobX](https://mobx.js.org/README.html)\n\n**RxDeep** and MobX share some core design philosophies in terms of being unopinionated reactive state management solutions. The main difference\nis MobX's implicit approach for automatically deducing state / expression dependencies, while **RxDeep** relies on the power of RxJS for explicitly\ndefining / manipulating streams.\n\nThis brings much more fine grained control and extensibility, at the expense of face-value learnability (as RxJS does seem more complicated to newcomers). \nHowever in practice MobX syntax (e.g. [computed values](https://mobx.js.org/README.html#computed-values)),\ndoesn't differ much from the equivalent RxJS syntax (e.g. [the map pipe](https://www.learnrxjs.io/learn-rxjs/operators/transformation/map)). In fact,\nMobX's implicit deduction approach [raises implicit constraints and considerations](https://mobx.js.org/refguide/computed-decorator.html), while the explicit approach of RxJS avoids that, and the actual added complexity of RxJS kicks in for operations beyond the scope of MobX.\n\n\u003cbr\u003e\n\n### [Focal](https://github.com/grammarly/focal)\n\nAmongst mentioned libraries, **RxDeep** shares most concepts and ideas with Focal. Focal, however, is specifically designed specifically to work with\nReact, while **RxDeep** is completely framework agnostic. This also means that similar to Redux, precision is not a priority for Focal, while it is\nthe main focus of **RxDeep**.\n\n\u003cbr\u003e\u003cbr\u003e\n\n[![Build Status](https://badgen.net/travis/loreanvictor/rxdeep?label=build\u0026cache=300\u0026icon=travis)](https://travis-ci.org/loreanvictor/rxdeep)\n[![Code Coverage](https://badgen.net/codecov/c/github/loreanvictor/rxdeep?cache=300\u0026icon=codecov)](https://codecov.io/gh/loreanvictor/rxdeep)\n[![Minzipped Size](https://badgen.net/bundlephobia/minzip/rxdeep@latest?icon=jsdelivr\u0026color=purple)](https://bundlephobia.com/result?p=rxdeep@latest)\n[![NPM Version](https://badgen.net/npm/v/rxdeep?cache=300\u0026icon=npm)](https://www.npmjs.com/package/rxdeep)\n[![Code Quality](https://badgen.net/codacy/grade/423972f1e78b453e8e69581ba4abc058?cache=300\u0026icon=codacy)](https://www.codacy.com/manual/loreanvictor/rxdeep)\n[![License](https://badgen.net/github/license/loreanvictor/rxdeep?icon=github)](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floreanvictor%2Frxdeep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floreanvictor%2Frxdeep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floreanvictor%2Frxdeep/lists"}