{"id":19401379,"url":"https://github.com/onthegosystems/micro_store","last_synced_at":"2026-06-12T13:31:18.567Z","repository":{"id":57164592,"uuid":"180157116","full_name":"OnTheGoSystems/micro_store","owner":"OnTheGoSystems","description":"Simple and minimalistic pure JS DataStore with publish / subscribe","archived":false,"fork":false,"pushed_at":"2019-04-09T09:13:13.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-26T00:25:17.166Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OnTheGoSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-08T13:38:31.000Z","updated_at":"2020-09-08T08:51:32.000Z","dependencies_parsed_at":"2022-09-04T05:40:42.268Z","dependency_job_id":null,"html_url":"https://github.com/OnTheGoSystems/micro_store","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/OnTheGoSystems%2Fmicro_store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OnTheGoSystems","download_url":"https://codeload.github.com/OnTheGoSystems/micro_store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240576485,"owners_count":19823293,"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-11-10T11:18:16.524Z","updated_at":"2026-06-12T13:31:18.561Z","avatar_url":"https://github.com/OnTheGoSystems.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MicroState\n## Simple and minimalistic pure JS router for clientside\n\n# Usage example\n## Define your Sample Store\n```js\nimport { MicroState } from \"@tarvit/micro_state\";\n\n// Your service\nimport SampleRequest from \"../services/requests/sample_request\";\n\nclass SampleStore {\n  constructor() {\n    // define default values for data you are going to store\n    this.state = {\n      data: {\n        values: [],\n        loaded: false,\n      }\n    }\n  }\n\n  // write your getters\n  getValues() {\n    return this.state.data.values;\n  }\n\n  isLoaded() {\n    return this.state.data.loaded;\n  }\n\n  // implement your data update\n  loadValues(page = 0) {\n    const req = SampleRequest.load(page);\n    req.then((response)=\u003e {\n      const json = JSON.parse(response);\n      this.setValues(json.data.values)\n    });\n  }\n\n  // define a setter to automatically dispatch notifications about data change\n  setValues(values) {\n    this.trigger(`values.loaded`);\n    this.state.data.values = values;\n    this.state.data.loaded = true;\n  }\n\n  // create wrapper to make it easier to subscribe to the event\n  bindValuesLoaded(key, callback) {\n    this.bind(`values.loaded`, key, callback);\n  }\n\n  // and oposite wrapper to unsubscribe\n  unbindValuesLoaded(key) {\n    this.unbind(`values.loaded`, key);\n  }\n}\n\nMicroState.mixin(SampleStore);\n\nexport default SampleStore;\n```\n\n## How to use defined store in your react component\n```js\nimport React, { Component } from 'react';\nimport SampleStore from \"../../stores/sample_store\";\n\nexport default class StateDashboard extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      // load initial values\n      values: SampleStore.instance.getValues(),\n      loaded: SampleStore.instance.isLoaded(),\n      text: props.text\n    };\n  }\n\n  componentWillMount() {\n    // subscribe to changes in store\n    SampleStore.instance.bindValuesLoaded(`dashboard`, () =\u003e {\n      // update your local state\n      this.setState({\n        values: SampleStore.instance.getValues(),\n        loaded: SampleStore.instance.isLoaded()\n      })\n    });\n  }\n\n  componentWillUnmount() {\n    // unsubscribe this content\n    SampleStore.instance.unbindValuesLoaded(`dashboard`);\n  }\n\n  componentDidMount() {\n    // trigger load and state update\n    SampleStore.instance.loadValues();\n    // you can always manually call SampleStore.instance.setValues(values)\n  }\n}\n```\n\n\n# Commands for development\n\n## install dependencies\n$ yarn\n\n## test\n$ yarn test\n\n## build\n$ yarn build\n\n## release\n$ npm publish\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonthegosystems%2Fmicro_store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonthegosystems%2Fmicro_store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonthegosystems%2Fmicro_store/lists"}