McflyFlux1

by CodeRenaissance

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://kenwheeler.github.io/mcfly/McFly.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

"use strict";

/** McFly */

var Flux = new McFly();

var TodoStore = ( function(){
	let _todos = [];
	let store = Flux.createStore({
            getTodos: function(){
               return _todos;
            },
            addTodo: function(payload){
                _todos.push(payload.text);console.log("test2");
            },
            removeTodo: function(payload){
                _todos.splice(payload.index,1);
            }
        }, 
        (payload) => {
            if(payload.actionType === "ADD_TODO") {
                store.addTodo(payload);
                store.emitChange();
            }
            else if(payload.actionType === "DELETE_TODO") {
                store.removeTodo(payload);
                store.emitChange();
            }
    });
    
    return store;
}());

var TodoActions = Flux.createActions({
    addTodo: (text) => ({actionType: "ADD_TODO", text: text }),
    deleteTodo: (index) => ({actionType: "DELETE_TODO", index: index })
});


var App = (function(store){
console.log(store);
	function getState(){
        return {
			todos: store.getTodos()
        }
    }
    
	return React.createClass({
		mixins: [store.mixin],
		getInitialState: function(){
			return getState();
		},
		onChange: function() {
			this.setState(getState());
		},
		render: function() {
			return <Todos todos={this.state.todos} />;
		}
	});
}(TodoStore));

/** Component */
var Todos = React.createClass({
    render: function() {
        var addTodo = ()=> TodoActions.addTodo('Test');
    	var deleteTodo = (index) => TodoActions.deleteTodo(index);
        var getText= (todo,index) => todo + " " + index;
        
        return (<div className="todos_app">
            <button onClick={addTodo}>Add Todo</button>
            <ul className="todos">
                { this.props.todos.map(function(todo, index){
                    return <li key={index}  style={{padding:3}}>
                    	{getText(todo,index)}&nbsp;
                    	<button ...