README
X-block
It is npm package, for using global state as redux state, but change state as mobx state.
- You do not need to wrap many components in mobx "observer"
- Use "connect" from react-redux only where you need it
- Change state directly or with methods, without hard reducers.
- Change state asynchronously
Include hot module replacement with saving current state.
Install
$ npm install x-block --save
Usage
import React from 'react';
import {subscribe, connect} from 'x-block';
const counter = {
scopeName: 'counter',
state: {
itt: 0
},
increment() {
this.state.itt++;
},
decrement() {
this.state.itt--;
}
};
subscribe(counter);
const Counter = connect(state => state[counter.scopeName])(p_ => (
<div>
<p>{p_.itt}</p>
<div>
<button
onClick={() => counter.increment()}
>
Increment
</button>
</div>
<div>
<button
onClick={() => counter.decrement()}
>
Decrement
</button>
</div>
<div>
<button
onClick={() => {counter.state.itt++}}
>
Increment state directly
</button>
</div>
<div>
<button
onClick={() => {counter.state.itt--}}
>
Decrement state directly
</button>
</div>
</div>
));
export default Counter;