https://github.com/capaj/react-observe-store
using observe-js it observes your stores and calls forceUpdate() on your component whenever a change is triggered in stores
https://github.com/capaj/react-observe-store
Last synced: about 1 year ago
JSON representation
using observe-js it observes your stores and calls forceUpdate() on your component whenever a change is triggered in stores
- Host: GitHub
- URL: https://github.com/capaj/react-observe-store
- Owner: capaj
- License: mit
- Created: 2015-06-23T12:17:03.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-04-14T08:41:19.000Z (about 10 years ago)
- Last Synced: 2025-04-15T06:16:58.923Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-observe-store
**Do not use this in production**. I'd made this when I was just experimenting with custom state management. While it might work for some usecases, it is not a solid library. If you need simple scalable state mangement based on observables use [MobX](https://github.com/mobxjs/mobx).
a small utility which uses a regex to match store paths/properties accessed in render function, observe them and call render on your component. Observation is based on https://github.com/polymer/observe-js.
This can make you independent from Flux or any other state management solution.
## Usage
Install with JSPM: `jspm i github:capaj/react-observe-store`
Install with NPM(written in es6, so requires babel): `npm react-observe-store`
then just simply call observeStore in the constructor:
```javascript
import {observeStore} from 'react-observe-store'
import React from 'react'
const store = {a: 1, b:2, c:4} //or import store from another file
export default class About extends React.Component {
constructor(...props) {
super(...props)
observeStore(this, store, 'store')
}
render() {
return
{store.b} //observes store.b for changes and automatically rerenders when it's value changes
}
}
```
or you can utilize a helper method for observing multiple stores
```javascript
import {componentObserveStores} from 'react-observe-store'
import React from 'react'
const storeA = {a: 1, b:2, c:4} //or import store from another file
const storeB = {a: 0, b:10, c:5}
export default class About extends React.Component {
constructor(...props) {
this.observedStores = [()=> storeA, ()=> storeB],
componentObserveStores(this)
}
render() {
return
{storeA.b}{storeB.c} //observes store.b for changes and automatically rerenders when it's value changes
}
}
```
By default, observeStore looks at the render method, but you can pass any function as 4th argument to statically analyse
```javascript
observeStore(this, ()=> store, anyFunctionWhichUsesTheStoreToRenderElements) //you can pass optionally a function which you want to statically check for store usages
```
Lastly, there is a lower level API method available, which you can use when your store is appearing in render method by a different identifier, like [here](https://github.com/capaj/postuj-hovna/blob/master/www/components/profile.jsx#L19) for example:
```javascript
observeStoreByString(this, store, 'this.prop', anyFunctionWhichUsesTheStoreToRenderElements) //you can pass an exact string by which you reference it in your render method
```
## Does it work?
Yes, it is thoroughly tested and it does work, with a caveat that it can't determine a path to watch if you're accessing the member via a variable resolved in render time.
For example:
```javascript
const store = {a: 1, b:2, c:4}
...
constructor(){
this.myProp = 'b'
}
render(){
return
{store[this.myProp]} //won't be observed automagically :-(
return {store.b} //works, automagically observes
return {store['b']} //works, automagically observes
}
```
When a store variable is not known before runtime, you can always import `observe-js` and use it to manually observe a path known at runtime.
I find that utilizing Object.observe for keeping my view in sync greatly reduces the overall complexity of my react apps. No need for Flux, Reflux or even Redux.
### Browser support
the same as [observe-js](https://github.com/polymer/observe-js), so anything newer than IE9. If Object.observe is not available, it uses dirty checking.
## Know issue
React hot loader api replaces your render methods with a cached function, so we cannot inspect the original render method. Be aware. Fix is easy, but I am not sure when it will be merged.
## Contributing
Do you have a bug or feature request? Feel free ask, post a bug or better yet a PR!
Running tests:
```
npm i browser-sync -g $#
npm i
npm run serve
```
Then just go to http://localhost:3000/test/ and let them a second or more to pass.