WyComponet

現(xiàn)在的移動端封裝的widget-util在react和redux聯(lián)系建立起來比較繁瑣，不少同事吐槽這個庫不好用.我也用得很不爽所以寫了個WyComponet來簡化redux的使用

原來的zapp庫的使用

下面是“云打印”上使用widget-util的一個模塊

import { registerComponent, WidgetComponent, getComponentState， reduceComponentState } from 'widget-utils';
 class PrintDes extends WidgetComponent {
    static statePath = 'PrintDes';
    static getInstanceInitState() {
        return {
            printSettingDetail: {}
        }
    }
    static mapStateToProps(state, ownProps) {
        const instanceState  = getComponentState(state, PrintDes)
        return { instanceState }
    }
    static componentReducer(state, action) {
        let instanceState = getComponentState(state, PrintDes);
        let newState = {};
        switch (action.type) {
            case 'PRINT_SETTING_DETAIL':
                newState = {
                    ...instanceState,
                    printSettingDetail: action.data
                };
                window.PrintDes = action.data;
                return reduceComponentState(state, newState);
        }
        return state;
    }
    componentWillMount(){
         this.getPrintSetting()
    }
    getPrintSetting() {
        //請求分類數(shù)據(jù)
        callApi("/evh/siyinprint/", "/getPrintSetting", {  
        }).then((json) => {
            if (json.response) {
                this.dispatch({type: 'PRINT_SETTING_DETAIL', data: json.response})
            }
        }
    }
    goBack(){
        this.props.history.push("/home")
    }
    render() {
        return (<div>
            </div>)       
        )
     }
 }
 export default registerComponent(PrintDes);

1. statePath 聲明component的命名空間
2. getInstanceIntState 設(shè)置初始的state值
3. mapStateToProps 建立state與component的映射關(guān)系
4. componentReducer 設(shè)置component的reducer的值
5. registerComponent(PrintDes) 注冊component

業(yè)務(wù)還沒開始，就寫了一大堆，嚴(yán)重影響開發(fā)心情.

所以重點(diǎn)來了，各位同學(xué)要認(rèn)真聽咯

新的zapp庫

下面是“服務(wù)聯(lián)盟web”的一個模塊

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {WyComponent, registerComponent} from "widget-utils";
import "./index.less"

const {detail} = createActions("DETAIL");
class Detail extends WyComponent{
    static statePath = "Detail";
    static getInitState = ()=>{
        return {
            detail: {}
        }
    };
    static componentReducer = {
        [detail]:"detail"
    };
    componentWillMount(){
        var id = this.props.match.params.id;
         Request("/evh/yellowPage/getServiceAllianceEnterpriseDetail", {
        
            }).then((data) => {
                this.dispatch(detail(data))   
            })
    }
    componentDidMount(){
    }
    render(){
        let detail = this.props.detail
        return (<div className={prefix}>
        
        </div>)
    }
}

export default registerComponent(Detail)

1. statePath 設(shè)置component的命名空間
2. componentReducer 建立state與component的映射關(guān)系
3. registerComponent 注冊

是不是簡化了很多？

Api

 api說明

內(nèi)置方法

靜態(tài)屬性

說明:componentReducer = { [detail]:"detail" } 就是當(dāng)dispatch一個消息將更新組件里面的this.props.detail的值 也可以是 componentReducer = { [detail]:(state, action)=>({...state,detail: action.payload}) }