--------- simple front-end heart in mind. Scalable state management tools MobX

Mobx is a powerful, easy to use state management tool. Even redux authors have also had to recommend it, in many cases you can indeed use Mobx to replace lost redux.

MobX:

        MobX is a baptism of fire through the library, it is through the transparent reactive programming function (transparently applying functional reactive programming - TFRP) so that state management simple and scalable. Mobx is a centralized data management repository, similar to previous learning and vuex redux.

 

Why use it?

 In a single-page project, the realization of communication problems between components. Sons (props) child-parent (event)

 

How to use it?

 

 

1. mobx + jquery with

2. mobx + vuejs match

3. mobx + react with

 

Use the document:

https://cn.mobx.js.org/

https://juejin.im/post/5d9f33066fb9a04df9018cf2

 

development process:

1.npx create react  app  myapp

2.npm install mbox

3.npm install mbox-react

3.yarn add customize-cra react-app -rewired --dev mounted decorator         https://www.npmjs.com/package/customize-cra#with-mobx

 

 

Create a folder store index.js

Observable {Import, computed, from Action} 'mobx' ; 

// use mobx management data 

class CounterApp { 

    appName = 'counter'; // meaning now represented inside the warehouse appName this process is not mobx 
    // class with which All data is stored 
    // learning redux inside initState before the equivalent of 
    @observable count = 1;   // Observable is a decorator pattern, representing the current count is to mobx management, if you do not want to manage, then we do not need to add the decorator 

    // computed properties similar calculation vuejs inside 
    // computed attribute, the return count X 2 
    // definition of a method is the time, but when the call is a property 
    @computed GET doubleCount () {
         return  the this .count * 2 ; 
    } 

    // define the operation method of the data

    action.bound @ 
    INCREMENT () { 
        the this .count + =. 1 ; 
    } 

    @ action.bound 
    Decrement () { 
        the this .count - =. 1 ; 
    } 
} 

// exposed to provide a data repository and data operations may be used a method other components 

export default  new new CounterApp ();

 

The App.js project myapp file:

 

React Import, {from} the Component 'REACT' ; 

// Observer is a view used to react-redux subscription data inside Connect 
Import} from {Observer "mobx-REACT" ; 

Import from the Show './components/Show' ; 

Import from Store   './store' ; 

the console.log (Store); // mobx warehouse management 
window.store = Store; // debug data whether manually changed 

// decorator view subscription on behalf of the modified data, once the data changes, inside view refresh 

via @Observer 
class the extends the Component {the App 
    the render () { 
        return (
             <div> 
              <Button store.decrement the onClick = {}> - </ Button> 
              <P> {store.count} </ P> 
              <Store the Show Store} = {/>
              <button onClick={store.increment}>+</button>
            </div>
        );
    }
}

export default App;

 

Create a sub-assembly components folder show.js

 

React Import, {from} the Component 'REACT' ; 

// Note: You can now redux mobx centralized management and data? 
// What's the problem in the end to use? 
// large projects if the long-term development of redux; if small project mobx do not even have. 

{the Show the extends the Component class 
    the render () { 
        the console.log ( the this .props);
         return (
             <div> 
                <P> Show subassembly - { the this .props.store.count} </ P> 
                <P> Show subassembly - { the this .props.store.doubleCount} </ P> 
            </ div>         ); 
    } 
} 
Export default the Show;