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的框架,部分出于隐私考虑没有写出来。

版权声明:

相关文章推荐

SuperAgent使用简介

SuperAgent使用简介

React实战-Flux中嵌套action的解决方法

Flux中是不允许两个action事件嵌套在一个同步控制域里的,然而在实际应用中这样的联动操作却很多,那么我们该如何解决此类情况?

《React-Native系列》22、 Flux框架Demo详解

今天我们来结合一个简单的Demo来讲解Flux框架,让大家了解Flux框架的真面目。 先上一张比较漂亮的图(对漂亮的图,总是没有抵抗力:-) )。 我们再来回顾下Flux框架的四大组成...

ReactNative React-native-router-flux框架---页面跳转与传值

页面跳转与传值 1. 正向跳转 2. 正向跳转并传值 3. 反向跳转 4. 反向跳转并传值 5. 指定页面跳转 6. 指定页面跳转并传值

说说React,Flux,Reray和GraghQL

今天看到同事转发的《ReactEurope Conf 参会感想》,这篇文章讲的react的一些理念感觉有些道理,但我对react最终能很好的实现learn once, write everywhere...
  • offbye
  • offbye
  • 2015-07-16 18:35
  • 1769

React Native入门与实战完整版

  • 2017-03-10 10:23
  • 67.68MB
  • 下载

浅谈 React、Flux 与 Redux

React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成单向的数据流 根据 state 的变化来更新 view 利用虚拟 DOM 来提升渲染性能
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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