React实战-如何构建React+Flux+Superagent的完整框架

原创 2016年08月30日 17:09:12

React实战-如何构建React+Flux+Superagent的完整框架

ReactJS并不像angular一样是一个完整的前端框架,严格的说它只是一个UI框架,负责UI页面的展示,如果用通用的框架MVC来说,ReactJs只负责View了,而Angular则是一个完整的前端框架,包含了MVC的全部。那么问题来了,采用ReactJS时,MC怎么办了,其实不仅是MC的问题,包括UI控件的如何选择,开发者都有很大的主动权,但是任何事情总在两难的选择中,全帮你做了,面面面具到,你会觉得受约束,这么不好,那也不好,还不方便用别的,选择多了也是问题,到底哪一款才是最好的。

ReactJs的官网上推荐的是React+Flux,但是现在越来越流行的是React+Redux。其实ReduxFlux的升级版,使得一些写法和应用更加简单,如果你熟悉了React+Flux的方式,你能很容易的使用React+Redux了。

在访问服务端时,你依然可以选择你喜欢的组件来实现,jQuery等都可以选择,但是Superagent是个不错的选择,简单、精炼、并且访问操作RestFul服务非常方便。

整个框架依据ReactJs的单项数据流方式,如下图:


图中View自然就是ReactJs的页面组件了。整个框架的结构也基本依据上图构建。

分为View(Components)、Dispatcher、Actions、Store和Resource

View:页面组件;

Dispatcher:管理注册分发事件;

Actions:定义各类操作;

Store:关联事件与操作,调用Resource,获取数据,并触发相关事件;

Resource:访问服务,获得数据。

整个框架结构清晰明了,还是简单粗暴的上代码直观(进入页面,显示列表数据)。

1.View

function getAllProducts() {

    return {

        allProducts: ProductStore.getProducts() || null

    };

};

var ProductCategoryRow = React.createClass({

getInitialState: function () {

        return {

            allProducts: ProductStore.getAllProducts() || null

        };

 

    },

componentDidMount(){

        ProductStore.addChangedListener(this._onChange);

        ProductAction.getAllProducts();

    },

 

    componentWillUnmount(){

        ProductStore.removeChangedListener(this._onChange);

    },

 

    _onChange()

    {

        this.setState(getAllProducts());

    },

  render: function() {

    return (<tr><th colSpan="2">{this.props.category.name}</th></tr>);

  }

});

var ProductTable = React.createClass({

 

  render: function() {

    This.state.allProducts.forEach(function(product) {

      rows.push(<ProductCategoryRow category={product} key={product.id} />);

    });

    return (

      <table>

        <thead>

          <tr>

            <th>Name</th>

            <th>Price</th>

          </tr>

        </thead>

        <tbody>{rows}</tbody>

      </table>

    );

  }

});

2.Dispatcher

var Dispatcher = require('flux').Dispatcher;

var ProductDispatcher = new Dispatcher();

module.exports = ProductDispatcher ;

3.Actions

module.exports = {

  getAllProducts: function () {

    ProductDispatcher.dispatch({

      type: “getProduct”

    });

  }

};

4.Store

var EventEmitter = require('events').EventEmitter;

var assign = require('object-assign');

var CHANGE_EVENT = 'change';

var RulesStore = assign({}, EventEmitter.prototype, {

  getProducts(){

    return this.products;

  },

searchProducts(){

ProductResource.getProducts().then((products) => {

This.products = products;

}

this.emit(CHANGE_EVENT);

}

addChangedListener(callback)

  {

    this.on(CHANGE_EVENT, callback);

  },

  removeChangedListener(callback){

    this.removeListener(CHANGE_EVENT, callback);

  },

}

ProductDispatcher.register(function (action) {

  switch (action.type) {

    case “getProduct”:

      RulesStore.searchProducts();

      break;

Default:

Break;

}

}

5.Resource

module.exports = {

getProducts(productid){

this.get('/admin/rules/')

      .set('Content-Type', 'application/XXXX')

      .query('productid=' + productid)

      .then(this.resolve, this.reject);

  }

}

上述代码完整的展现了一个基于ReactJS+Flux的框架,部分出于隐私考虑没有写出来。

React实战-如何构建React+Flux+Superagent的完整框架

React实战-如何构建React+Flux+Superagent的完整框架 ReactJS并不像angular一样是一个完整的前端框架,严格的说它只是一个UI框架,负责UI页面的展示,如果用通用的框...
  • loveu2000000
  • loveu2000000
  • 2016年08月30日 17:09
  • 1075

React+Babel+Webpack初学者全家桶完整实例Demo

写在前面的话自已以前对redux,react,rect-redux,react-router都是有一点的了解,并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一个demo将他们串起来,所以总...
  • liangklfang
  • liangklfang
  • 2017年06月04日 14:09
  • 2734

tensorflow27《TensorFlow实战Google深度学习框架》笔记-10-04 异步更新模式样例程序 code

# 《TensorFlow实战Google深度学习框架》10 TensorBoard计算加速 # win10 Tensorflow1.0.1 python3.5.3 # CUDA v8.0 cudnn...
  • longji
  • longji
  • 2017年04月11日 10:15
  • 639

React入门指引与实战

本文介绍了React的基础知识,并通过一个实际可运行的示例带领读者一步步开发出一个基于React的评论系统,旨在厘清React开发的各项知识点,同时对于开发过程中所用的工具有一定的认识和掌握。...
  • ricohzhanglong
  • ricohzhanglong
  • 2016年07月29日 15:53
  • 11150

Redux without profanity

Welcome to a summary of how we write redux apps at Docker, Inc. aimed to be used as a guide for our ...
  • qfgg3
  • qfgg3
  • 2016年09月03日 09:35
  • 308

React + ES6环境搭建与第一个应用

最近也在学习React、Angular、Vue等这类的MV*应用,感觉React+ES6写的时候很爽,所以就分享给大家。首先,我们先从React的官网上把React和所依赖的包都下载过来。http:/...
  • sunyuan_software
  • sunyuan_software
  • 2016年04月21日 09:50
  • 4290

react与框架整合

结合网络相关文档,记载react如何与线下框架整合,大神请绕道 gulp+require+backbone+react,借鉴github上demo梳理一下 大神github地址 https://g...
  • u013261261
  • u013261261
  • 2016年08月01日 14:35
  • 231

React开发实战pdf

下载地址:网盘下载 图书简介 编辑 《React开发实战介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与...
  • cf406061841
  • cf406061841
  • 2017年08月25日 17:56
  • 1663

自己动手搭建一个移动端React+Redux+Webpack3项目框架

自己一直使用的框架React Redux Universal Hot Example,这个用的React Router Webpack 都是比较老的。项目大了之后,运行很慢慢,一直都想换,可找了好久其...
  • xiaotuni
  • xiaotuni
  • 2017年09月18日 15:35
  • 681
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React实战-如何构建React+Flux+Superagent的完整框架
举报原因:
原因补充:

(最多只允许输入30个字)