Combining all values in a Bacon stream into a single array

Question

I'm building an application using React and Bacon.js.

I have a list of students like so:

var students = [
   {"name": "student1"}
   ...
];

I then construct an EventStream using a Bacon.bus.

var studentStream = new Bacon.Bus();
students.forEach(studentStream.push.bind(studentStream));

What I want to do is whenever I push new data to the bus, I'd like to update my view with the new data.

var studentContainer = React.createClass({
    getInitialState: function () {
        return {students: []};
    },
    componentWillMount: function () {
        // 1: convert this.prop.studentStream to an array so it can be rendered
        // 2: Set state to the new array
    },
    render: function () {
        ...
    }
});

Answer 1

You're pretty close here. In your React component subscribe to your event bus:

componentDidMount: function() {
    studentStream.onValue(function(val) {
        this.setSate({ students: val });
    }.bind(this));
}

Whatever values get pushed into studentStream will flow into your component's state. I've also built a small library for working with React.js and Bacon.js: https://www.npmjs.org/package/fluxstream