christianalfoni

angular.module('app', [])

  // We define a service state
  .service('AppState', function ($rootScope) {
    
    // We define a namespace for our application state and
    // make it available as a variable for conveniance
    var app = $rootScope.app = {};
  
    // We define an application state

christianalfoni

import Store from 'immutable-store';

// Any mutations to an immutable-store returns the new mutated store as a result of the operation.
// More info at: https://github.com/christianalfoni/immutable-store
export default function (state = Store({todos: []}), action) {

  switch (action.type) {
  case ADD_TODO:
    return state.todos.push(action.payload);
  case REMOVE_TODO:

christianalfoni

import React from 'react';
import {Decorator as State} from 'cerebral-react-immutable-store';
import {views} from './constants.js';
import Home from './Home.js';
import Messages from './Messages.js';

@State({view: ['view']})
class App extends React.Component {
  render() {
    

christianalfoni

import React from 'react';
import {Decorator as Cerebral} from 'cerebral-react';
import {CSSTransitionGroup} from 'react-addons';

import Home from './Home.js';
import Admin from './Admin.js';

@Cerebral({
  title: ['title'],
  currentPage: ['currentPage']

christianalfoni

What is the difference between Cerebral and Redux?

Cerebral and Redux were built to solve different problems

Redux was developed to achieve hot reloading global state and state changing logic. To achieve that it was necessary for state changes to be run with pure functions and the state has to be immutable. Now you can change the logic inside your reducer and when the application reloads Redux will put it in its initial state and rerun all the actions again, now running with the new state changing logic.

Cerebral had no intention of achieving hot reloading. Cerebral was initially developed to give you insight into how your application changes its state, using a debugger. In the Redux debugger you see what actions are triggered and how your state looks after the action was handled. In Cerebral you see all actions fired as part of a signal. You see asynchronous behaviour, paths taken based on decisions made in your state changing flow. You see all inputs and outputs produced during the flow and you even

christianalfoni

/*
  IT WAS SO NICE TO USE THE MODULE ARG
*/

// With context
function action ({module}) {
  module.state.set('foo', 'bar');
}

// Now

christianalfoni

var React = require('react')
var callbacks = []
var listener = false

module.exports = {
  contextTypes: {
    controller: React.PropTypes.object
  },
  componentWillMount: function () {
    this.signals = this.context.controller.isServer ? {} : this.context.controller.getSignals()

christianalfoni

var React = require('react')
var mixin = require('./mixin.js')

module.exports = function (Component, paths) {
  return React.createClass({
    displayName: Component.name + 'Container',
    mixins: [mixin],
    componentWillReceiveProps: function (nextProps) {
      this._update(null, nextProps);
    },

christianalfoni

var React = require('react')
var callbacks = []
var listener = false

var currentUpdateLoopId = 0

module.exports = {
  contextTypes: {
    controller: React.PropTypes.object
  },

christianalfoni

var React = require('react')
var callbacks = []
var listener = false

var currentUpdateLoopId = 0

module.exports = {
  contextTypes: {
    controller: React.PropTypes.object
  },