1

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 () {
        ...
    }
});
Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Azeirah
  • 6,176
  • 6
  • 25
  • 44

1 Answers1

2

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

Shawn
  • 919
  • 6
  • 11
  • 1
    This is correct, just make sure that the values in studentStream contain all the students in an array. If you want to push single student objects into the stream, have a look at `scan` or `Bacon.update` to convert the bus into such a stream. – OlliM Dec 03 '14 at 09:07
  • 1
    Got it to work using `students.scan([], ".concat").onValue(...)`, now I'm one step closer to my personal modular Meteor C: – Azeirah Dec 03 '14 at 21:34