JSFiddle - React, Tailwind, and code Playground

by Ayité D'almeida

HTML

<script src="https://npmcdn.com/redux/dist/redux.js"></script>
<script src="https://wzrd.in/standalone/expect@latest"></script>
  <script src="https://npmcdn.com/redux/dist/redux.js"></script>
  <script src="https://npmcdn.com/react/dist/react.js"></script>
  <script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
  <script src="https://npmcdn.com/react-redux/dist/react-redux.js"></script>
  <script src="https://npmcdn.com/expect/umd/expect.js"></script>
  <script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<body>
  <div id='root'></div>
</body>

Babel + JSX

const counter = (state = 0, action) => {
 switch(action.type) {
  	case 'INCREMENT': 
    	return state + 1;
    case 'DECREMENT':
    	return state -1;
    default :
    	return state;
  }
}

const counters = (state=[], action) => {
	switch(action.type) {
  	case 'ADD_COUNTER':
    	return state.concat([0]);
    case 'INCREMENT':
    	return state.map((val,i) => action.index == i ? val + 1: val);
  	default :
    	return state;
  }
}

expect(
	counters(undefined, {})
).toEqual([]);

expect(
	counters([], { type: 'ADD_COUNTER' })
).toEqual([0]);

expect(
	counters([0], { type: 'ADD_COUNTER'})
).toEqual([0, 0]);

expect(
	counters([0, 0, 0], {
  	type: 'INCREMENT',
    index: 1
  })
).toEqual([0, 1, 0]);

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

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

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

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

console.log('All tests pass');