Stockage is a small class that help you to create a data store.
The method action return a function.
let anActionNameMethod = YourStock.action('anActionName');The method getState return a copy of the stockage state.
let state = YourStock.getState();The method subscribe return a copy of the stockage state and give you the ability to run a function each time the state change.
YourStock.subscribe(anObject,'aMethodName');The method unsubscribe doesn't return anything.
YourStock.unsubscribe(anObject,'aMethodName');This is an example of how do we define a stockage.
This Stockage will be use in a React App.
// AppStock.js
import Stockage from 'stockage';
class AppStock extends Stockage{
constructor(){
super({
state : {
text : ''
},
options : {
storage : 'AppStock'
}
});
}
onTextInputChange(state,event){
state.text = event.target.value;
return state;
}
}
let appStock = new AppStock();
export default appStock;All actions has a copy of the current state as a first argument.
To apply the change you made to the state, you have to return it.
yourAction(state,[..some args you can pass when calling your action]){
state.foo = "bar";
return state;
}The action's context has a method called async
The async method allow you to change the state after some asynchronous call.
The async method has a *fresh copy as a first argument, to apply the change you have to return the state.
yourAction(state,[..some args you can pass when calling your action]){
state.foo = "bar";
setTimeout(()=>{
this.async((freshCopyOfTheState)=>{
freshCopyOfTheState.bar = "foo";
return freshCopyOfTheState;
});
},1000);
return state;
}This is how we listen the state's change of a Stockage.
import AppStock from './AppStock';
let anObject = {
onChange : function(state){
console.log('State change to :',state);
}
}
AppStock.subcribe(anObject,'onChange');
//AppStock.unsubcribe(anObject,'onChange');This is how we link the state of a React component with the state of a Stockage.
import React from 'react';
import AppStock from './AppStock';
class App extends React.Component{
constructor(props){
super(props);
this.state = AppStock.subscribe(this,'setState');
}
componentWillUnmount(){
AppStock.unsubscribe(this,'setState');
}
render(){
return (<div>
<input value={this.state.text}
onChange={AppStock.action('onTextInputChange')} />
{this.state.text}
</div>)
}
}
let appStock = new AppStock();
export default appStock;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent