全堆栈ReactJS套件

由于ReactJS只是视图层，并且由他自己工作，在构建SPA时使用哪些附加库用于完整堆栈ReactJS套件 - 数据层，与服务器通信（AJAX调用，REST）等单页面应用程序）？全堆栈ReactJS套件

他们是否有ReactJS全栈架构（类似AngularJS）？

2015-06-22 Orbitum

仅ReactJS为您提供DOM渲染，但Facebook也创建了Flux，它为您提供了一个可以工作的架构。按照Flux规定的规则，您现在拥有一个带DOM渲染的SPA，数据模型以及两者之间的通信。

当然，您将使用Flux构建的SPA是独立的。 Flux不会为您提供执行AJAX请求的工具。你需要另外一个库。但是，NodeJS社区充满了AJAX实现，我可能更喜欢它。

superagent是一个非常受欢迎的。（这是我使用的。）您可能会注意到它不支持承诺，因此您可能还会检出superagent-bluebird-promise，其中包含superagent和bluebird承诺库。另外还有一点需要注意的是，如果您打算使用Flux，那么我建议您也可以使用越来越多的封装库来帮助您减少样板。退房Reflux。

一个完整的周期可能是这样的......

RecordList.jsx

const React = require('react'); 
const Reflux = require('reflux'); 

const RecordStore = require('../stores/RecordStore'); 
const RecordActions = require('../actions/RecordActions'); 

const RecordList = React.createClass({ 
    mixins: [ 
     // auto-magically create event listeners to state change to re-render 
     Reflux.connect(RecordStore) 
    ], 

    // There is no `getInitialState()` here, but the one in `RecordStore` is inherited. 

    // load the initial data 
    componentDidMount: function() { 
     RecordActions.load(); 
    }, 

    // render records as a list 
    render: function() { 
     return (
      <li> 
       { 
        this.state.records.map(function (record) { 
         return <ul>{record.name}</ul>; 
        }) 
       } 
      </li> 
     ); 
    } 
}); 

module.exports = RecordList;

RecordActions.js

const Reflux = require('reflux'); 
const request = require('superagent-bluebird-promise'); 

const RecordActions = Reflux.createActions({ 
    // create an action called 'load' and create child actions of 'completed' and 'failed' 
    load: {asyncResult: true} 
}); 

// set up promise for loading records 
RecordActions.load.listenAndPromise(() => 
     request.get('/records') 
      .type('application/json') 
      .then(res => res.body) 
); 

module.exports = RecordActions;

RecordStore.js

const Reflux = require('reflux'); 
const RecordActions = require('../actions/RecordActions'); 

/** 
* storage for record data 
*/ 
const RecordStore = Reflux.createStore({ 
    // listen for events from RecordActions (Reflux) 
    listenables: RecordActions, 

    init: function() { 
     this.data = { 
      records: [] 
     }; 
    }, 

    // facilitate initializing component state with store data 
    getInitialState: function() { 
     return this.data; 
    }, 

    /* 
    * all records 
    */ 
    getRecords: function() { 
     return this.data.records; 
    }, 

    // handle successful load of records 
    onLoadCompleted: function (response) { 
     this.data.records = response; 
     this.trigger(this.data); 
    }, 

    // handle failure to load records 
    onLoadFailed: function (err) { 
     console.error('Failed to load records', err.toString()); 
    } 
}); 

module.exports = RecordStore;

来源

2015-06-22 21:46:12