x-block v2.1.2

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.

• HMR example

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;

Examples

• Counter with HMR