https://github.com/argyleink/rxstate
💊 Turn any object or array into a reactive store
https://github.com/argyleink/rxstate
es6 npm-package rxjs rxjs6 state-store unidirectional-data-flow
Last synced: 2 months ago
JSON representation
💊 Turn any object or array into a reactive store
- Host: GitHub
- URL: https://github.com/argyleink/rxstate
- Owner: argyleink
- Created: 2018-07-16T04:23:30.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T03:00:28.000Z (almost 7 years ago)
- Last Synced: 2025-04-11T02:06:15.499Z (2 months ago)
- Topics: es6, npm-package, rxjs, rxjs6, state-store, unidirectional-data-flow
- Language: JavaScript
- Homepage:
- Size: 60.5 KB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RxState
Turn any object or array into a reactive store
Use it like this:
```js
import { rxStore, rxLogger } from 'rxstatestore'
// init store with seed state
// actions take manipulation params
// reducers are passed state at time of invocation
// the reducer is expected to return new state post manipulation
const Counter = rxStore(0, {
increment: (amount = 1) => count => count + amount,
decrement: (amount = 1) => count => count - amount,
})
// subscriber(s) always given latest, at subscription and as state changes (hot)
Counter.$.subscribe(count => someNode.textContent = count)
// UI logic calls actions
Counter.increment()
Counter.increment(5)
Counter.decrement()
Counter.decrement(5)
// optional: opt into nice state change console logs
rxLogger('Counter', Counter.$)
```
I made this for myself, but maybe you want it to. It's really just a wrapper function to allow easy to define state stores with RxJS. I've found the strategy scales really well and works great for leveraging RxJS in UI development.