Christian Alfoni 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

	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

	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:

	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() {

	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']

 /*
   IT WAS SO NICE TO USE THE MODULE ARG
 */
 // With context
 function action ({module}) {
   module.state.set('foo', 'bar');
 }
 // Now

	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()

	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);
	},