问全栈ReactJS套件

EN

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;

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;

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;