npm i react-scomponent
Mixes anotherstatemanager
functionality into React by wrapping the component's setState function in React.Component with the ability to setState on a shared global state object.
The benefits of this are:
You can create new state objects and pass them as props otherwise a default state
can be imported. The component always updates its render first then sets state on the shared object.
The state object will check on frame for updates to its own values or can be triggered immediately with state.setState({etc:'etc..'}).
If you update a state value on your component, it will update the corresponding state value on the shared state object so it will be propagated automatically to other components or wherever else in your script.
import {state, sComponent} from 'react-scomponent'
class myComponent extends sComponent {
state = {
clicked:false
}
onclicked() {
this.setState({clicked:!this.state.clicked})
console.log(state.data)
}
render() {
(
<div>
<button onClick={this.onclicked}>Clickme</button>
{this.state.clicked &&
<div> Clicked on! </div>
}
</div>
)
}
}
state.subscribeTrigger('clicked',(res)=>{
console.log('clicked!');
})
Just make sure you preserve the state
prop if you need to add to those. Else it defaults to the provided state
object.
import { Component } from 'react'
import {StateManager} from 'anotherstatemanager'
export const state = new StateManager({ }); //globally available state object
//These components share their state with the global state, and changes propagate both directions with setState
export class sComponent extends Component {
statemgr=state
UPDATED=[]
constructor(
props={
state:state //can apply a new state other than the global state so you can have states for certain pages for example
}
) {
super(props);
if(props.state)
this.statemgr = props.state;
//lets overload setState
let react_setState = this.setState.bind(this);
this.setState = (s={}) => {
this.UPDATED = Object.keys(s);
react_setState(s);
if(typeof s === 'object') {
state.setState(s); //now relay through statemanager
}
}
//so this runs AFTER the inherited constructor
setTimeout(()=>{
let found = {};
for(const prop in this.state) { //for all props in state, subscribe to changes in the global state
this.statemgr.subscribeTrigger(prop,(res)=>{
let c = this;
if(typeof c === 'undefined'){
this.statemgr.unsubscribeTrigger(prop);
}
else {
let wasupdated = this.UPDATED.indexOf(prop);
if( wasupdated > -1) {
this.UPDATED.splice(wasupdated,1);
}
else {
react_setState({[prop]:res});//only updates one prop at a time rn
}
}
});
}
if(Object.keys(found).length > 0) react_setState(found); //override defaults
},0.001);
}
}
import {StateManager} from 'anotherstatemanager'
let state = new StateManager(
{x:1}
"FRAMERATE" //or 1000 (ms) etc.
true //start the subscription loops automatically? False to just use the trigger state
);
let sub = state.subscribe('x',(newx) => {console.log(newx);});
let sub = state.subscribe(key,onchange); //triggers changes on frame
state.unsubsribe(sub); //pass the key you received from .subscribe to remove the function
state.subscribeOnce(key,onchange);
let subt = state.subscribeTrigger(key,onchange); //fire the function when you setState, these run independent of the interval based functions so you can have on-demand functions and on-frame/interval functions
state.unsubscribeTrigger(subt); //pass the key you received from .subscribe to remove the function
state.subscribeTriggerOnce(key,onchange);
let subs = state.subsribeSequential(key,onchange); //this is a sequence state manager so it fires on the update interval and for each update pushed between the update periods e.g. tallying key inputs. This won't relate to the state component by default.
state.unsubscribeSequential(sub);
state.subscribeSequentialOnce(key,onchange);
//...
state.setState({x:3});
state.setState({...keys:values});