Add Controllerim example

[RusinovAnton]

https://github.com/Niryo/controllerim

A simple, clean and well structured state management library for react

Basic usage example

Note: This is a usage example of sharing data between parent and a direct child, but keep in mind that the child could have been a nested child and everything would have stayed the same.

Inside ParentController.js:

import { Controller } from 'controllerim';

export class ParentController extends Controller {
  constructor(compInstance) {
    super(compInstance);
    this.state = {
      message: 'hello' 
    };
  }
  getMessage() {
    return this.state.message;
  }
  setMessage(value) {
    this.state.message = value;
  }
}

Inside Parent.jsx:

import React, { Component } from 'react';
import { observer } from 'controllerim';
import { ParentController } from './ParentController';

class Parent extends Component {
  componentWillMount() {
    this.controller = new ParentController(this);
  }

  render() {
    return (
      <div>
        <h1>{this.controller.getMessage()}</h1>
        <Child/>
        <button onClick={() => this.controller.setMessage('hello world!')}>Click me to change message</button>
      </div>
    );
  }
};

export default observer(Parent);
/** 
note: If you don't want to use default export, you could export the class directly:
export const Parent = observer( class extends Component {
  ...
  }
);

*/

Inside Child.jsx:

import React, { Component } from 'react';
import { observer} from 'controllerim';
import { ChildController } from './ChildController';

class Child extends Component {
  componentWillMount() {
    this.controller = new ChildController(this);
    this.parentController = this.controller.getParentController('ParentController');
  }

  render() {
    return (
      <div>
        <span>This is a message from parent: {this.parentController.getMessage()}</span>
      </div>
    );
  }
};

export default observer(Child);

[juandc]

Help arrived!