文档持续完善中...

将react、redux整合一起使用的繁琐步骤进行封装，对外提供@View、@Control、@Model分别对应react component、redux action、redux store调用

• @View 利用react-redux中提供的connect包装器将store、control（action）与Component建立联系，使Component具有操作store和调用control的能力，Component中可直接使用this.props[update/del/insert/save]对store数据进行更新
• @Control 拥有与服务端数据通信功能，获取数据后可决定是否更新store或直接什么都不做，提供@Sync装饰器；被装饰的类会返回一个对象列表，提供给Component调用，此外还提供默认的数据修改方法：update、save、del、insert
• @Model 字段映射关系和数据操作，包括对数据的增删改查；默认提供del、update、save等store方法

generator-future-static提供对应脚手架项目webpack-react

最后page方法将决定具体哪个Component在页面的哪个节点中渲染。

安装

npm install gfs-react-dm --save

表单元素数据更新方式

    后续完善...

使用(一个改变年龄的简单例子,适用于2.0以上版本)

* View

import React, { Component /*,PropTypes*/} from 'react'
import {Model,Control,Sync,View,page} from 'gfs-react-dm'

@View(TestControl)
class TestComponent extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount(){
        setTimeout(()=>{
            //调用control中的方法改变age
            this.props.changeAge(this)
        },1000)
    }

    static defaultProps={}

    render() {
        console.log('age:',this.props.testmodel.get('age') )
        return (
            

                {this.props.testmodel.get('age')}
            
        )
    }
}

//渲染到页面
page(TestComponent)

* Control

import {Control,fetch,action} from 'gfs-react-dm'
import TestModel from '../model/TestModel'

@Control(TestModel)
class TestControl {
    constructor(){

    }

    @action
    changeAge(){
        
        //方法之间可以相互调用
        book = this.getBook()

        fetch('/test.json',/*params*/).then((data)=>{
            //control中默认提供update、del、insert、save四种操作数据方法

            this.update('age','ajax改变的age：'+data.age)
        })
    }
    //pojo
    getBook(){
        return {}
    }
}

* Model

import {Model} from 'gfs-react-dm'

@Model
class TestModel {
    //必须赋予__name值，否则无法正确查找到store
    static __name = 'test'
    static age = 20
}