Overview
Mota is a "lightweight and responsive" state management library, which is less than 5KB. Developers can use it to write "almost framework independent pure js/ts business models", and then use Mota to simply let react components respond to model changes.
Install
Install through NPM as follows
$ npm install mota --saveUsage
Example 1: Hello Mota
import { observable, observer } from "mota";
const model = observable({ count: 0 });
const add = ()=>model.count++;
const View1 = observer(() => {
return <div>{model.count}</div>;
});
const View2 = observer(() => {
return <div>
<span>{model.count}</span>
<button onClick={add}>click<button>
</div>;
});Example 2: Using useObservable
import { observer, useObservable } from "mota";
const View = observer(() => {
const model = useObservable({ count: 0 });
return <div>
<span>{model.count}</span>
<button onClick={()=>model.count++}>click<button>
</div>;
});Example 3: Using useComputed
import { observer, observable, useComputed } from "mota";
const user = observable({
firstName: 'Feng',
lastName: 'Hou'
});
const View = observer(() => {
// The fullName will be cached and responsive
const fullName = useComputed(()=>{
return `${user.firstName} ${user.lastName}`;
});
return <div>{fullName}</div>;
});Example 4: Using useAutoRun
import { observer, observable, useAutoRun } from "mota";
const model = observable({ count: 0 });
const View = observer(() => {
// When the count changes,
// it will be automatically re executed and printed 'count: n'
useAutoRun(()=>{
console.log('count:', model.count);
});
return <div>{model.count}</div>;
});Example 5: Using useWatch
import { observer, observable, useWatch } from "mota";
const model = observable({ count: 0 });
const View = observer(() => {
// When the result of the evaluation function changes,
// the processing function is re executed.
useWatch(()=>model.count%10, (oldValue, newValue)=>{
console.log(`old: ${oldValue}, new: ${newValue}`);
});
return <div>{model.count}</div>;
});Example 6: Using in class components
import { observer, observable, autorun, watch } from "mota";
const model = observable({ count: 0 });
@observer
class View extends React.Component {
add = ()=> model.count++;
componentDidMount(){
this.destroyAutoRun = autorun(()=>{
console.log('autorun count: ', model.count);
});
this.destroyWatch = watch(()=> model.count%10, ()=>{
console.log('autorun count: ', model.count);
});
}
componentWillUnmount(){
this.destroyAutoRun();
this.destroyWatch();
}
@computed get message(){
return `count: ${model.count}`;
}
render() {
return <div>
<span>{this.message}</span>
<button onClick={this.add}>click<button>
</div>;
}
}Example 7: Using multiple instances in class components
import { observer, observable, autorun, watch } from "mota";
@observable
class Model {
count = 0;
add () {
this.count++;
}
@computed get message(){
return `count: ${model.count}`;
}
}
@observer
class View extends React.Component {
model = new Model();
render() {
return <div>
<span>{this.model.message}</span>
<button onClick={()=>this.model.add()}>click<button>
</div>;
}
}