{"id":15354942,"url":"https://github.com/capaj/react-observe-store","last_synced_at":"2025-04-15T06:17:05.903Z","repository":{"id":34092631,"uuid":"37917045","full_name":"capaj/react-observe-store","owner":"capaj","description":"using observe-js it observes your stores and calls forceUpdate() on your component whenever a change is triggered in stores","archived":false,"fork":false,"pushed_at":"2016-04-14T08:41:19.000Z","size":28,"stargazers_count":9,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T06:16:58.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/capaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-23T12:17:03.000Z","updated_at":"2019-08-18T16:46:56.000Z","dependencies_parsed_at":"2022-07-18T01:11:19.334Z","dependency_job_id":null,"html_url":"https://github.com/capaj/react-observe-store","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-observe-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-observe-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-observe-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-observe-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capaj","download_url":"https://codeload.github.com/capaj/react-observe-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016646,"owners_count":21198833,"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":[],"created_at":"2024-10-01T12:21:45.847Z","updated_at":"2025-04-15T06:17:05.887Z","avatar_url":"https://github.com/capaj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-observe-store\n**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).\n\na 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.\n\nThis can make you independent from Flux or any other state management solution.\n\n## Usage\nInstall with JSPM: `jspm i github:capaj/react-observe-store`\nInstall with NPM(written in es6, so requires babel): `npm react-observe-store`\n\nthen just simply call observeStore in the constructor:\n```javascript\nimport {observeStore} from 'react-observe-store'\nimport React from 'react'\nconst store = {a: 1, b:2, c:4}\t//or import store from another file\n\nexport default class About extends React.Component {\n  constructor(...props) {\n    super(...props)\n    observeStore(this, store, 'store')\n  }\n  render() {\n    return \u003cdiv\u003e{store.b}\u003c/div\u003e\t//observes store.b for changes and automatically rerenders when it's value changes\n  }\n}\n```\nor you can utilize a helper method for observing multiple stores\n```javascript\nimport {componentObserveStores} from 'react-observe-store'\nimport React from 'react'\nconst storeA = {a: 1, b:2, c:4}\t//or import store from another file\nconst storeB = {a: 0, b:10, c:5}\n\nexport default class About extends React.Component {\n  constructor(...props) {\n    this.observedStores = [()=\u003e storeA, ()=\u003e storeB],\n    componentObserveStores(this)\n  }\n  render() {\n    return \u003cdiv\u003e{storeA.b}{storeB.c}\u003c/div\u003e\t//observes store.b for changes and automatically rerenders when it's value changes\n  }\n}\n```\n\nBy default, observeStore looks at the render method, but you can pass any function as 4th argument to statically analyse\n```javascript\nobserveStore(this, ()=\u003e store, anyFunctionWhichUsesTheStoreToRenderElements)\t//you can pass optionally a function which you want to statically check for store usages\n```\n\nLastly, 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:\n```javascript\nobserveStoreByString(this, store, 'this.prop', anyFunctionWhichUsesTheStoreToRenderElements)\t//you can pass an exact string by which you reference it in your render method\n```\n\n## Does it work?\n\nYes, 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.\n\nFor example:\n```javascript\nconst store = {a: 1, b:2, c:4}\n...\nconstructor(){\n\tthis.myProp = 'b'\n}\nrender(){\n\treturn \u003cdiv\u003e{store[this.myProp]}\u003c/div\u003e\t//won't be observed automagically :-(\n\treturn \u003cdiv\u003e{store.b}\u003c/div\u003e\t\t//works, automagically observes\n\treturn \u003cdiv\u003e{store['b']}\u003c/div\u003e\t//works, automagically observes\n}\n```\nWhen 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.\nI 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.\n\n### Browser support\nthe 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.\n\n## Know issue\n\nReact 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.\n\n## Contributing\nDo you have a bug or feature request? Feel free ask, post a bug or better yet a PR!\n\nRunning tests:\n```\nnpm i browser-sync -g $#\nnpm i\nnpm run serve\n```\nThen just go to http://localhost:3000/test/ and let them a second or more to pass.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapaj%2Freact-observe-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapaj%2Freact-observe-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapaj%2Freact-observe-store/lists"}