react-redux

simple example

by Norlihazmey Ghazali

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<div id="root"></div>

Babel + JSX

//const React = React;
//const ReactDOM = ReactDOM;
const { createStore } = Redux;

var defaultState = {
	items : [{
    	message : 'Hello',
        completed : false
    }]
};

const store = createStore( myReducer, defaultState );

function myReducer( state, action ) {	
    
    switch( action.type ) {
    	
        case 'ADD_TODO' :
            let newState = Object.assign({}, state);
            newState.items.push({
                message : action.message,
                completed : false
            });
            return newState;
        default:
            return state;
        
    }
        
}

function addTodo( message ) {
	return {
    	type : 'ADD_TODO',
        message : message
    };
}

class TodoForm extends React.Component {
	
    state = {
    	message : ''
    };
    
    onSubmitForm (e) {
    	e.preventDefault();
        store.dispatch(addTodo( this.state.message ));
    }
    
    onChangeInput (e) {
    	const val = e.target.value;
        this.setState({
        	message : val
        });
    }
    
    render () {
    	return (
        	<div>        	    
                <form onSubmit={this.onSubmitForm.bind(this)}>
                    d : <input type="text" value={this.state.message} onChange={this.onChangeInput.bind(this)}/> <input type="submit" value="Add"/>
                </form>            
        	</div>
        );
    }
}

class TodoItem extends React.Component { 
    
    render () {
    	return (
        	<li>
        	    {this.props.item}
        	</li>
        )
    }
}

class TodoMain extends React.Component {
    
    constructor ( props ) {
    	super(props);
        
        this.state = {
            items : store.getState().items
        };
        
        store.subscribe( () => {        	
            let obj = store.getState();            
            this.setState({
            	items : obj.items
            })
        })
    }
    
    render () {
    	const items = this.state.items;
    	const listItem =...