全栈ReactJS套件

Question

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

它们是否可用任何ReactJS完整堆栈框架(类似AngularJS)？

Answer 1

ReactJS单独为您提供DOM渲染,但Facebook也创建了Flux它,为您提供了一个可以工作的架构.遵循Flux制定的规则,您现在拥有一个带有DOM渲染,数据模型和两者之间通信的SPA.

当然,您使用Flux构建的SPA是独立的.Flux并没有为您提供执行AJAX请求的工具.你需要另一个图书馆.但是,NodeJS社区充满了AJAX实现,我可能更喜欢它.

superagent是一个非常受欢迎的.(这是我使用的.)你可能会注意到它不支持promises,所以你也可以签出superagent-bluebird-promise,它包含superagent了bluebirdpromise库.

另外需要注意的是,如果你要使用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;