arqex

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 *
 * To apply this styles to your editor click on 

arqex

var freezer = new Freezer({
	todos: [],
	todoInput: '',
	status: 'ready',
	filter: 'all'
});

arqex

// state variable is immutable
var state = freezer.get();

// Accessing is easy
console.log( state.todos ); // []
console.log( state.status ); // 'ready' 

// But it is not possible to
// update the state directly
state.status = 'loading';

arqex

var state = freezer.get();

// this will replace app state for a new one
state.todos.push({
  model: {id: 1, title: 'Do this.', completed: false},
  ui: {status: 'ready', input: 'Do this.'}
});

// state variable is still unchanged,
// it is immutable

arqex

var TodoApp = React.createClass({
	componentDidMount: function () {
		var me = this;

		// Here the magic happens. Everytime that the
		// state is updated the app will re-render.
		// A real data driven app.
		freezer.on('update', function(){
			me.forceUpdate();
		});

arqex

// Creaing a todo item 
// using a standard flux dispatcher
dispatch({actionType: 'createTodo', title: 'Do this.'});

// using freezer
freezer.trigger('todo:create', 'Do this.');

arqex

/* FREEZER */
// Create a reaction
freezer.on('todo:update', function( todo, text ){
  todo.model.set({title: text});
});

// Trigger the event from your component
var TodoList = React.createComponent({
...
  updateTodo: function( todo, text ){

arqex

/* STANDARD FLUX */
// Using flux you need to register the action in the dispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {
    case 'updateTodo':
      text = action.text.trim();
      if (text !== '') {

arqex

// Our input is something like
var TodoInput = React.createElement({
  render: function(){
    return <input value={ this.props.state.todoInput } onChange={ this.updateInput } />
  },
  updateInput: function(){
    // We don't need to create a reaction for this,
    // This is not a problem because the whole state will be
    // updated and the whole app will be notified of this change
    this.props.state.set({ todoInput: e.target.value }).now()

arqex

var TodoList = React.createClass({
  ...
	shouldComponentUpdate: function( nextProps ){
		return nextProps.todos != this.props.todos;
	}
  ...
});