Reql-Redux

Reql-redux是基于redux、react（下文省略为redux）框架上的，为了配合使用梦马公司的Reql，所做的前端框架。旨在使，前端人有只需要参与redux的view层面的编写，即可完成大部分需求的开发，其数据同步由Reql-Redux进行支持。 ##安装 安装reql-redux确保你的项目是基于redux的。

npm install https://{username}@bitbucket.org/dreamll-yuan/redux-reql.git 

username是公司bitbucket项目下，你的帐号名。 当然如果这一本没有办法执行，建议公司的人员直接下载到本地，link到或者把它放在你项目中的node_modules模块中。Y(^^)Y ##如何整合到你的redux项目当中 在使用reql－redux之前，请先确认你已经学会redux了，不然看下面的内容可能会觉得自己宛若智障。Y(^^)Y

Step1:添加reqlMiddlewave

import { reqlApiMiddlewave } from 'redux-reql';

const store = createStore(rootReducer, preloadedState, compose(
    applyMiddleware(reqlApiMiddlewave({baseURL: 'localhost:3000'}))
  ));

reqlApiMiddlewave方法需要一个参数，这个参数是一个对象类型，是reql－redux放送请求的参数配置对象，如上述代码必须声明的是请求reql的请求地址baseURL。如果你需要更多的特殊配置，请参考axios的readme文档

###Step2:使用addReqlReducers方法，添加reql-redux的reducers

import { addReqlReducers } from 'redux-reql';
const rootReducer = combineReducers(addReqlReducers({youRootReducresObj}));

完成上述两本以后，你的项目已经绑定上reql-redux了，接下来就可以使用它了。 ##如何使用reql-redux ###ReqlComponent ####handleEvent 作为ReqlComponent它们都拥护操作数据的能力，它们将获得handleEvent这个函数作为属性（组件的props），使用这个handleEvent接受两个参数，一个是reql语句的描述，一个是reql语句中描述的参数。

	handleEvent(String reql, [Object { params, data }])

如果不会使用reql的话，可以阅读编译器之神邱世杰写的Reql语法文档。

下面我们看一个栗子。

//reql 描述。
const reql = "query { user(id==$id): {user, name}}"
const params = {id: '1'}

//组件内部获取handleEvent方法
const {
   handleEvent
} = this.props;

// 执行
handleEvent(reql, {params: params});

系统将会执行这一条查询语句，然后查询的结果将会自动注入到ReqlComponent的内部。

//获取查询结果。
const {
	user
} = this.props;
const userInfo = user[id];

需要注意的是，在handleEvent方法查询结束之前，user不会做为属性注入，取到的值应该为undefined.

在查询嵌套了其他实体信息的时候，reql-redux将会把他们整理成平行的结构发回给ReqlComponent.

//reql 描述。
const reql = "query { user(id==$id): {
	user, 
	name, 
	role: {
		name, rule
		}
	}
}"
const params = {id: '1'}

//组件内部获取handleEvent方法
const {
   handleEvent
} = this.props;

// 执行
handleEvent(reql, {params: params});

查询结束后，reql-redux会将user，和role做为两个对象传回给ReqlComponent。

//获取查询结果。
const {
	user,
	role
} = this.props;
const userInfo = user[id];
const roleInfo = role[user.role];

####初始化数据查询reqlParams（String） 如果ReqlComponent有获得属性reqlParams，那么在组件初始化时将自动进行一次数据查询。reqlParams为reql的描述

####如何编写ReqlComponent 其实ReqlComponent的编写很简单。只需要在对普通的React Component封装一层高阶组件。

import { ReqlConnect } from 'redux-reql';
class A extends Component{
//...some code
}
export default ReqlConnect(A);

在生成ReqlComponent实例的时候，我们需要将它包在ReqlContainer的下面。

import { ReqlContainer } from 'redux-reql';
import TestComponent from '../components/TestComponent';

class App extends Component {
  render() {
    return (
      <div>
        <ReqlContainer>
        // TestComponent 为ReqlComponent
          <TestComponent
            reqlParams={reqlParams}
            events={events}
          />
        </ReqlContainer>
      </div>
    )
  }
}

这样ReqlComponent就可以使用了。祝你使用愉快。