Very simple mobx state management tools

mobx is a state management system, introduced from mobx Observable and Action;

observable store data page is to define what, action is the executor; similar redux

Page needs to be introduced in the app import {Provider} from "mobx- react", mechanism utilizes Provider to pass values to the sub

observer home page is similar to a listener, like redux inside reducers, inject the introduction of a store

　　By introducing store @inject ( 'store')

　　　　　@observer to monitor changes in the components inside

First, install

1, init create a project version 0.59.9

2, npm i [email protected] @ mobx-react @ 5.4.3 --save (@ babel / core version 7.4.0)

3 disposed decorator yarn add  @babel/plugin-proposal-decorators --save

　　Then you need to add the following code file babel.config.js

"plugins": [
    [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ]
二、创建文件
　　src{
　　appstore/index.js
　　pages/home.js
}
三、文件中书写
1、appstore.js中的书写

import {observable,action} from 'mobx';
let appStore = observable({
    counter: 0,
    str:"荆国瑞",
    list:["as"]
});
appStore.addCount = action(()=>{
    appStore.counter+=1;
});
appStore.subCount = action(()=>{
    if(appStore.counter<=0){
        return;
    }
    appStore.counter-=1;
});
appStore.changeCount = action((key)=>{
    if(key<=0){
        appStore.counter=0;
    }
    appStore.counter=parseInt(key);
});
appStore.changeStr = action((key)=>{
    if(!key)return
    appStore.str=key
});

appStore.clickhand=action(()=>{
    appStore.list.push (appStore.str) 
    appStore.str = "" 
}) 
Export AppStore default 
writing 2, home file
　　

import React, {Component} from 'react';
import { StyleSheet, Text, View,TouchableOpacity,TextInput,Button,Alert} from 'react-native';
import {observer, inject} from 'mobx-react';

@inject('store')
@observer
export default class Home extends Component{
    constructor(props){
        super(props);
        this.state={
            value:0,
            str:"荆国瑞"
        }
    }
    componentWillMount(){
        console.log(this.props.store.counter)
    }
    sub=()=>{
        let {store}=this.props;
        store.subCount()
    }
    add=()=>{
        let {store}=this.props;
        store.addCount()
    }
    changehand=(e)=>{
        let {store} = this.props
        store.changeStr(e)
    }
    clickhand=()=>{
        let {store} =this.props
        store.clickhand()
    }
    render() {
        let {store}=this.props
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.sub}>
                    <Text style={styles.txt}>-</Text>
                </TouchableOpacity>
                <TextInput style={{width:100,height:35,borderWidth:1}} value={store.counter.toString()}/>
                <TouchableOpacity onPress={this.add}>
                    <Text style={styles.txt}>+</Text>
                </TouchableOpacity>
                <TextInput value={store.str} style={styles.inp} onChangeText={this.changehand}/>
                <Button title="添加" onPress={this.clickhand}/>
                <View>
                    {
                        store.list.map((item)=>{
                            return <Text>{item}</Text>
                        })
                    }
                </View>
            </View>
        );
    }
}



最后写在app文件内就可以了

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Home from "./src/pages/home"

import {Provider} from "mobx-react"
import Appstore from "./src/store/appStore"

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={Appstore}>
        <Home/>
      </Provider>
    );
  }
}

最后：store的另一种写法：
通过

observable 来定义数据内容，

action 来执行

class appStore{
    @observable counter = 0; @observable themeType = 'light'; @observable theme=themeData['light']; @action changeTheme=(themeType)=>{ this.themeType=themeType this.theme=themeData[themeType]; } } export default new appStore();