reactjs - 全栈 ReactJS 套件

Question

由于ReactJS只是 View 层并且由他自己工作，因此在构建SPA(单页应用程序)时需要使用其他库来实现全栈ReactJS套件 - 数据层、与服务器的通信(AJAX调用、REST)等？

有可用的 ReactJS 全栈框架(比如 AngularJS)吗？

Answer 1

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

当然，您将使用 Flux 构建的 SPA 是独立的。 Flux 并没有为您提供执行 AJAX 请求的工具。为此，您将需要另一个库。然而，NodeJS 社区充满了 AJAX 实现，我实际上可能更喜欢它。

superagent是一个非常受欢迎的。 (这就是我使用的。)您可能会注意到它不支持 promise ，因此您也可以查看 superagent-bluebird-promise ，它用 bluebird 包装 superagent promise 库。

另一个注意事项，如果您要使用 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;