Using Immutable for top-down rendering

list.js

var Immutable = require('immutable'),
    React     = require('react'),
    component     = require('omniscient');

var data = Immutable.fromJS({
  title: 'My list',
  items: [ 'one', 'two', 'three' ]
});

var EditMixin = {
  changeText: function onChange (e) {
    // Having access to value through cursors
    this.props.cursor.update(function () {
      return 'Swapped text!';
    });
    // or even something like:
    // actions.doText(this.props.cursor);
  }
};

var Item = component(EditMixin, function (cursor) {
  // With Immutable 2.4.0
  // return d.span({ onClick: this.changeText }, Immutable.unCursor(cursor));
  return React.DOM.li({ onClick: this.changeText }, cursor.deref());
});

var List = component(function (cursor) {
  return React.DOM.div({},
    React.DOM.h1({}, cursor.get('title')),
    React.DOM.ul({},
      cursor.cursor('items').map(function (v, key, itemsCursor) {
        return Item('item-' + key, itemsCursor.cursor(key));
      }).toArray()
    )
  );
});

var body = document.querySelector('body');
render();

function render () {
  var cursor = data.cursor(function (newData) {
    data = newData;
    render();
  });
  React.renderComponent(List(cursor), body);
}

You could update this example by changing your data structure to be:

items: [ {name: 'one'}, {name: 'two'}, {name: 'three'} ]

And then referencing cursor.get('name') and cursor.update('name', v => v)

And on line 32, you can replace itemsCursor.cursor(key) with itemsCursor.get(key) -- that also returns a wrapped cursor value for Immutable collections.

Thanks for your comment! This would how ever alter my data structure. Trivial in this contrived case, but can in larger structures not be as trivial. I've updated the original issue with my response: immutable-js/immutable-js#97 (comment)