How to use baobab - 10 common examples

import React from 'react';
import ReactDom from 'react-dom'
import Baobab from 'baobab'
import axios from 'axios';

// Style
import {bootstrap} from './bower_components/bootstrap/dist/css/bootstrap.css';

// Initialization
var tree = new Baobab({});

let onopen = function() {
  let subscribe_msg = {'type': 'join', 'data': {'topics': ['power']}}
  ws.send(JSON.stringify(subscribe_msg));
}

let onmessage = function(evt) {
  let data = JSON.parse(evt.data).data;
  let action = data.action;
  let resource_id = data.resource_id;
  if (action == 'patch') {
    let patch = data.patch['$set'];
    for(let key in patch) {
      tree.set([resource_id, key], patch[key]);
    }
  } else if (action == 'create') {

//     return {}
        // }
        getCutsitesFromSequence
    ]),
    cutsites: deriveData([
        ['cutsitesByName'],
        function (cutsitesByName) {
            var cutsitesArray = [];
            Object.keys(cutsitesByName).forEach(function (key) {
                // return cutsitesByName[key]
                cutsitesArray = cutsitesArray.concat(cutsitesByName[key]);
            });
            return cutsitesArray;
        }
    ]),
    translationsWithAminoAcids: deriveData([
        ['sequenceData', 'translations'],
        ['sequenceData', 'sequence'],
        function getTranslationsWithAminoAcids(translations, sequence) {
            return translations.map(function(translation) {
                var translationWithAminoAcids = assign({}, translation);
                var subseq = getSequenceWithinRange(translation, sequence);
                translationWithAminoAcids.aminoAcids = getAminoAcidDataForEachBaseOfDna(subseq, translation.forward);
                return translationWithAminoAcids;
            });
        }
    ]),
    sequenceLength: deriveData([
        ['sequenceData'],
        function(sequenceData) {
            return sequenceData.sequence ? sequenceData.sequence.length : 0;
        }

function(userEnzymeList) {
            return userEnzymeList.map(function(enzymeName) {
                return enzymeList[enzymeName];
            });
        }
    ]),
    cutsitesByName: deriveData([
        ['sequenceData', 'sequence'],
        ['sequenceData', 'circular'],
        ['userEnzymes'],
        // function (argument) {
        //     return {}
        // }
        getCutsitesFromSequence
    ]),
    cutsites: deriveData([
        ['cutsitesByName'],
        function (cutsitesByName) {
            var cutsitesArray = [];
            Object.keys(cutsitesByName).forEach(function (key) {
                // return cutsitesByName[key]
                cutsitesArray = cutsitesArray.concat(cutsitesByName[key]);
            });
            return cutsitesArray;
        }
    ]),
    translationsWithAminoAcids: deriveData([
        ['sequenceData', 'translations'],
        ['sequenceData', 'sequence'],
        function getTranslationsWithAminoAcids(translations, sequence) {
            return translations.map(function(translation) {
                var translationWithAminoAcids = assign({}, translation);

],
        ['charWidth'],
        function(rowViewDimensionsWidth, charWidth) {
            return Math.floor(rowViewDimensionsWidth / charWidth);
        }
    ]),
    
    userEnzymes: deriveData([
        ['userEnzymeList'],
        function(userEnzymeList) {
            return userEnzymeList.map(function(enzymeName) {
                return enzymeList[enzymeName];
            });
        }
    ]),
    cutsitesByName: deriveData([
        ['sequenceData', 'sequence'],
        ['sequenceData', 'circular'],
        ['userEnzymes'],
        // function (argument) {
        //     return {}
        // }
        getCutsitesFromSequence
    ]),
    cutsites: deriveData([
        ['cutsitesByName'],
        function (cutsitesByName) {
            var cutsitesArray = [];
            Object.keys(cutsitesByName).forEach(function (key) {
                // return cutsitesByName[key]
                cutsitesArray = cutsitesArray.concat(cutsitesByName[key]);
            });

Store.storeName = name

  // Instantiates immutable state and saves it to private variable that can be used for setting listeners
  Store.prototype.immutable = function(initialState, options = {}) {
    if (this.__tree) {
      this.__tree.set(initialState)
    } else {
      this.__tree = new Baobab(
        initialState,
        angular.extend({}, immutableDefaults, options)
      )
    }
    return this.__tree
  }

  Store.prototype.monkey = Baobab.monkey

  // Attach store definition to the prototype
  Object.keys(spec).forEach(function(key) {
    Store.prototype[key] = spec[key]
  })

  return Store
}

/**
 * Baobab-React Mixins
 * ====================
 *
 * Old style react mixins.
 */
import PropTypes from './utils/prop-types';
import {solveMapping} from './utils/helpers';
import Baobab from 'baobab';

const makeError = Baobab.helpers.makeError;

/**
 * Helpers
 */
function displayName(instance) {
  return (instance.constructor || {}).displayName || 'Component';
}

/**
 * Root mixin
 */
const RootMixin = {

  // Component prop types
  propTypes: {
    tree: PropTypes.baobab

it('should be possible to pass cursors directly.', function() {
    const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false}),
          cursor = tree.select('name'),
          RootComponent = root(BasicRoot, tree);

    @branchDecorator({
      cursors: {
        name: cursor,
        surname: ['surname']
      }
    })
    class Child extends Component {
      render() {
        return (
          <span id="test">
            Hello {this.props.name} {this.props.surname}
          </span>
        );

it('should be possible to use actions.', function(done) {
    const tree = new Baobab({counter: 5}, {asynchronous: false}),
          RootComponent = root(BasicRoot, tree);

    function increment(tree, nb=1) {
      tree.apply('counter', c => c + nb);
    }

    function decrement(tree, nb=1) {
      tree.apply('counter', c => c - nb);
    }

    @branchDecorator({
      actions: {
        increment: increment,
        decrement: decrement
      },
      cursors: {

it('bound components should update along with the cursor.', function(done) {
      const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false});

      class Child extends Component {
        render() {
          return (
            <span>
              Hello {this.props.name} {this.props.surname}
            </span>
          );
        }
      }

      const Root = root(tree, BasicRoot);

      const BranchedChild = branch({
        name: 'name',
        surname: 'surname'

it('bound components should update along with the cursor.', function() {
    const tree = new Baobab({name: 'John', surname: 'Talbot'}, {asynchronous: false}),
          RootComponent = root(BasicRoot, tree);

    @branchDecorator({
      cursors: {
        name: ['name'],
        surname: ['surname']
      }
    })
    class Child extends Component {
      render() {
        return (
          <span id="test">
            Hello {this.props.name} {this.props.surname}
          </span>
        );
      }