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;
複製代碼