React + Redux sample

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://babeljs.io/scripts/babel.js"></script>
<div id="root">
</div>

<script id="jsx-babelify" type="text/babel-jsx">
	const counter = (state = 0, action) => {
	switch(action.type) {
  	case 'INCREMENT':
    		return state + 1;
    case 'DECREMENT':
    		return state - 1;
    default:
    	return state;
  }
}

const Counter = ({
	value,
  onIncrement,
  onDecrement}) => (
  	<div>
    	<h1>{value}</h1>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
      
    </div> 
  );

const {createStore} = Redux;
// import {createStore} from 'redux';

const store = createStore(counter); // bind reducer
/*
console.log(store.getState()); // get the current state obj. of store
store.dispatch({type: 'INCREMENT'});
console.log(store.getState());
*/

const render = () => {	
	ReactDOM.render(
  	<Counter value={store.getState()} onIncrement={() => store.dispatch({type: 'INCREMENT'})}
    onDecrement={() => store.dispatch({type: 'DECREMENT'})} />,
    document.getElementById('root')
  );
};

store.subscribe(render);
render(); // inital render

/*
document.addEventListener('click', () => {
	store.dispatch({type: 'INCREMENT'});
})*/




expect(
	counter(0, {type: 'INCREMENT'})
).toEqual(1);

expect(
	counter(1, {type: 'DECREMENT'})
).toEqual(0);

expect(
	counter(0, {type: 'SOMETHING_ELSE'})
).toEqual(0);

expect(
	counter(undefined, {})
).toEqual(0);

console.log('tests passed!');

</script>

<script>
    var codeElem = document.getElementById('jsx-babelify');
    babel.run(codeElem.textContent, {
        stage: 0,
    })
</script>