全堆棧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