nanachi 状态管理方案Redux、Mobx用法

可经过nanachi init命令初始化相应模板，查看Redux、Mobx示例代码

Redux

App组件处理

须要将Provider从新复制为React.Provider，以防编译器将其识别为普通组件。

若是用到redux须要在app类中添加render方法，返回对应的Provider。

import React from '@react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

const reducer = function (state, action) {
    switch(action.type) {
        case 'ADD': 
            return {
                ...state,
                value: state.value + 1
            };
        case 'MINUS': 
            return {
                ...state,
                value: state.value - 1
            };
        case 'CHANGE': 
            return {
                ...state,
                inputVal: action.payload
            };
        default:
            return state;
    }
}

const initState = {
    value: 12,
    inputVal: 100
}
const store = new createStore(reducer, initState);

class Global extends React.Component {
    globalData = {}
    static config = {
        window: {
            navigationBarBackgroundColor: '#00afc7',
            backgroundTextStyle: 'light',
            backgroundColor: '#00afc7',
            navigationBarTitleText: 'nanachi',
            navigationBarTextStyle: 'white'
        }
    };
    onLaunch() {
        //针对快应用的全局getApp补丁
        if (this.$data && typeof global === 'object') {
            var ref = Object.getPrototypeOf(global) || global;
            var _this = this;
            this.globalData = this.$def.globalData;
            ref.getApp = function() {
                return _this;
            };
        }
        console.log('App launched');//eslint-disable-line
    }
    // 正常nanachi项目app中不须要render，如需使用状态库Provider，需引入render方法
    render() {
        return <Provider store={store}>{this.props.children}<Provider>
    }
}

export default App(new Global());
复制代码

Pages/Components组件处理

页面、组件的写法与原生redux基本一致，须要注意不要将connect语句写到export default中，而是要在export default以前调用。

import React, {Component} from '@react';
import { connect } from 'react-redux';

const mapStateToProps = function (state) {
    return {
        value: state.value
    }
}

const mapDispatchToProps = function (dispatch) {
    return {
        add: function() {
            dispatch({
                type: 'ADD'
            });
        },
        minus: function() {
            dispatch({
                type: 'MINUS'
            });
        }
    }
}

class P extends Component {
    render() {
        return (<div class="page" > <text>{this.props.value}</text> <button onClick={()=> {this.props.add()}}>+</button> <button onClick={()=> {this.props.minus()}}>-</button> </div>
        );
    }
}

// connect须要写到export default语句前包裹页面。
P = connect(mapStateToProps, mapDispatchToProps)(P);

export default P;
复制代码

#Mobx

App组件处理

与redux处理方式相同

Pages/Components组件处理

与传统mobx装饰器写法一致

import React, {Component} from '@react';
import { observer, inject } from 'mobx-react';

@inject(
    state => ({
        num: state.store.num,
        add: state.store.add,
        minus: state.store.minus
    })
)
@observer
class P extends Component {
    render() {
        return (<div class="page" > <text>{this.props.num}</text> <button onClick={()=> {this.props.add()}}>+</button> <button onClick={()=> {this.props.minus()}}>-</button> </div>
        );
    }
}

export default P;
复制代码