Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/onthegosystems/micro_store

Simple and minimalistic pure JS DataStore with publish / subscribe
https://github.com/onthegosystems/micro_store

Last synced: about 1 month ago
JSON representation

Simple and minimalistic pure JS DataStore with publish / subscribe

Awesome Lists containing this project

README

        

# MicroState
## Simple and minimalistic pure JS router for clientside

# Usage example
## Define your Sample Store
```js
import { MicroState } from "@tarvit/micro_state";

// Your service
import SampleRequest from "../services/requests/sample_request";

class SampleStore {
constructor() {
// define default values for data you are going to store
this.state = {
data: {
values: [],
loaded: false,
}
}
}

// write your getters
getValues() {
return this.state.data.values;
}

isLoaded() {
return this.state.data.loaded;
}

// implement your data update
loadValues(page = 0) {
const req = SampleRequest.load(page);
req.then((response)=> {
const json = JSON.parse(response);
this.setValues(json.data.values)
});
}

// define a setter to automatically dispatch notifications about data change
setValues(values) {
this.trigger(`values.loaded`);
this.state.data.values = values;
this.state.data.loaded = true;
}

// create wrapper to make it easier to subscribe to the event
bindValuesLoaded(key, callback) {
this.bind(`values.loaded`, key, callback);
}

// and oposite wrapper to unsubscribe
unbindValuesLoaded(key) {
this.unbind(`values.loaded`, key);
}
}

MicroState.mixin(SampleStore);

export default SampleStore;
```

## How to use defined store in your react component
```js
import React, { Component } from 'react';
import SampleStore from "../../stores/sample_store";

export default class StateDashboard extends Component {
constructor(props) {
super(props);
this.state = {
// load initial values
values: SampleStore.instance.getValues(),
loaded: SampleStore.instance.isLoaded(),
text: props.text
};
}

componentWillMount() {
// subscribe to changes in store
SampleStore.instance.bindValuesLoaded(`dashboard`, () => {
// update your local state
this.setState({
values: SampleStore.instance.getValues(),
loaded: SampleStore.instance.isLoaded()
})
});
}

componentWillUnmount() {
// unsubscribe this content
SampleStore.instance.unbindValuesLoaded(`dashboard`);
}

componentDidMount() {
// trigger load and state update
SampleStore.instance.loadValues();
// you can always manually call SampleStore.instance.setValues(values)
}
}
```

# Commands for development

## install dependencies
$ yarn

## test
$ yarn test

## build
$ yarn build

## release
$ npm publish