Simple Observable Reactjs Store is a simple library to manage reactjs store. It uses HOC and javascript observable pattern. It can be usefull if you looking for a simple way to manage your reactjs app.
npm install --save sorsSimple Example
counter.js
import React, { Component } from 'react'
import { InjectStore, Store } from 'sors'
const demoInitialState = {
count: 0,
}
export const counterStore = new Store('demo', demoInitialState)
class Counter extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this)
}
onClick() {
let val = Number(this.props.getStore(appStore, 'id'));
val += 1;
this.props.setStore(appStore, 'id', val)
}
render() {
return (
<div style={{width: '100%', height: '300px'}}>
<button onClick={this.onClick}>Increase</button>
</div>
)
}
}
export default InjectStore(Counter, counterStore)example.js
import React, { Component } from 'react'
import { InjectStore, Store } from 'sors'
import { counterStore } from './counter'
export const mainStore = new Store('main', {})
class Example extends Component {
constructor(props) {
super(props);
this.state = {
counter: props.getStore(counterStore, 'count')
}
this.onChange = this.onChange.bind(this)
props.onStore(counterStore, 'count', this.onChange)
}
onChange(newVal) {
this.setState({ counter: newVal })
}
render() {
return (
<div style={{width: '100%', height: '300px'}}>{this.state.counter}</div>
)
}
}
export default InjectStore(Example, mainStore, )props.getStore(store, node): used to get node value from store
props.setStore(store, node, data): used to set node value = data in store
props.on(node, fn): subscribe "fn" to get updated value when node(s) in the current store changes
props.onStore(store,node, fn): subscribe "fn" to get updated value when node(s) in store changes
MIT © Mojahed Elbakre
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent