A propotion for data management in a React.js context and a single top immutable state handler

structure.js

var Immutable = require('immutable');
var EventEmitter = require('events').EventEmitter;
var fs = require('fs');

var sourceData = {};

try {
  sourceData = JSON.parse(fs.readFileSync(__dirname + '/../../sourceData.json', 'utf8'));
} catch (ex) {
  console.warn('Could not find source data file:', ex);
}

var data = Immutable.fromJS(sourceData);

var emitter = module.exports = new EventEmitter();

module.exports.cursor = function (path) {
  return data.cursor(path,
    handlePersisting(
      handleUpdate(function (newData, oldData, path) {
        data = newData;
      })
    )
  );
};

module.exports.current = function () {
  return data;
};

function handleUpdate (fn) {
  return function () {
    var original = fn.apply(fn, arguments);
    emitter.emit('render');
    return original;
  };
}

function handlePersisting (fn) {
  return function (newData, oldData, path) {
    var oldObject = oldData.getIn(path);
    var newObject = newData.getIn(path);

    var inOld = !!oldObject;
    var inNew = !!newObject;

    if (inOld && !inNew) {
      emit('delete', path, oldObject);
    } else if (inOld && inNew) {
      emit('update', path, newObject, oldObject);
    } else {
      emit('create', path, newObject);
    }

    return fn.apply(fn, arguments);
  };
}

function emit (verb, path, object) {
  var url = path.join('/');
  if (typeof object.url === 'function') {
    url = object.url();
  } else if (typeof object.url === 'string') {
    url = object.url;
  }

  emitter.emit(verb, url, object);
}

usage.js

var structure = require('./structure');
var cursor = structure.cursor(['a', 'b', 'c']);

structure.on('update', function (url, obj) {
  console.log('Updated', url, obj);
  
  // Do ajax?
  // ajax({
  //   verb: 'updated',
  //   url: url,
  //   payload: obj
  // });
});
// Same for 'create' and 'delete'

structure.on('render', function (url, obj) {
  console.log('Render new components');
  // e.g. 
  // React.renderComponent(
  //   App(structure.current().toObject()),
  //   document.querySelector('body')
  // );
});

console.log(cursor.deref());
cursor = cursor.update(function (x) {
  return x + 1;
});
console.log(cursor.deref());