Ramda

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="ramda@*" data-semver="0.24.1" src="https://unpkg.com/ramda@0.24.1/dist/ramda.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <pre id="objMsg"></pre>
    <script src="script.js"></script>
  </body>

</html>


var o = {a: [{f: 0, g: 3}]}; 

var o1 = R.set(R.compose(R.lensProp('a'), R.lensIndex(0), R.lensProp('f')), 1, o);

log('length after set ' + o1.a.length); 
logObj(o1); 
// => {a: [{f: 1, g: 3}]}

//============================//

var initialState = {
  tree: {
    text: "app",
    childNodes: [{
      text: 'core',
      childNodes: [{
        text: 'store',
        childNodes: [],
        expanded: false,
        path: ['tree', 'childNodes', 0, 'childNodes', 0]
      }, {
        text: 'service',
        childNodes: [],
        expanded: false,
        path: ['tree', 'childNodes', 0, 'childNodes', 1]
      }],
      expanded: false,
      path: ['tree', 'childNodes', 0]
    }],
    expanded: false,
    path: 'tree'
  }
};
//==============
log('new state')
logObj(initialState);
log('dispatching EXPAND for service');
var newState = reducer(initialState, {
  type: 'expand',
  payload: ['tree', 'childNodes', 0, 'childNodes', 1,'expanded'] //works with 0.24.1 version
});
log('new state')
logObj(newState); 
//================


//==============

log('dispatching COLLAPSE for service');
newState = reducer(initialState, {
  type: 'collapse',
  payload: ['tree', 'childNodes', 0, 'childNodes', 1] //works with 0.24.1 version
});
log('new state')
logObj(newState); 
//================

//==============

log('dispatching TOGGLE for service');
newState = reducer(initialState, {
  type: 'toggle',
  payload: ['tree', 'childNodes', 0, 'childNodes', 1] 
});
log('new state')
logObj(newState); 
//================



function reducer(state, action) {
  log('Previous State');
  logObj(state);
  switch (action.type) { 
    case 'expand':
      {
        log('Reducer: received action- ' + action.type);
        let path =R.lensPath(R.append('expanded',action.payload));
        return R.set(path, true, state);
      }
       case 'collapse':
      {
        log('Reducer: received action- ' + action.type);
         let path =R.lensPath(R.append('expanded',action.payload));
        return R.set(path, false, state);
      }
       case 'toggle':
      {
         log('Reducer: received action- ' + action.type);
         let path = R.lensPath(R.append('expanded',action.payload));
         let val =R.view(path, state);
         log('expanded: '+val);
         return R.over(path, R.not, state);
      }
      default: return state;
  }
}


function log(msg) {
  document.write("== == == == ==<br>");
  document.write('<b style="color:red">' + msg + '</b>');
  document.write("<br>== == == == ==");
}

function logObj(obj) {
  document.write("== == == == ==<br>");
  var msg = JSON.stringify(obj, undefined, 4);
  document.write('<textarea style="color:blue">' + msg + '</textarea>');
  document.write("<br>== == == == ==");
}

/* Styles go here */