WyComponet

现在的移动端封装的widget-util在react和redux联系建立起来比较繁琐，不少同事吐槽这个库不好用.我也用得很不爽所以写了个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() {
        //请求分类数据
        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 设置初始的state值
3. mapStateToProps 建立state与component的映射关系
4. componentReducer 设置component的reducer的值
5. registerComponent(PrintDes) 注册component

业务还没开始，就写了一大堆，严重影响开发心情.

所以重点来了，各位同学要认真听咯

新的zapp库

下面是“服务联盟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 设置component的命名空间
2. componentReducer 建立state与component的映射关系
3. registerComponent 注册

是不是简化了很多？

Api

 api说明

内置方法

静态属性

说明:componentReducer = { [detail]:"detail" } 就是当dispatch一个消息将更新组件里面的this.props.detail的值 也可以是 componentReducer = { [detail]:(state, action)=>({...state,detail: action.payload}) }