Workshop Base Fiddle

HTML

<script src="https://npmcdn.com/redux/dist/redux.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>
<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react/dist/react.js"></script>
<div id="root"></div>

Babel + JSX

(function() {
  'use strict';
  
  /* Write a todo list reducer
   * ADD_ACTION adds a todo with `id`, `text`, and `completed`
   * TOGGLE_TODO toggles a todo's `completed` field
   * Don't mutate the state!
   * Use tests to verify.
   */
	let count = 0;
  
	const todo = (state = {}, action) => {
  	switch (action.type) {
    	case 'ADD_TODO':
      	return {
        	text: action.text,
          id: count++,
          completed: false
        }
      case 'TOGGLE_TODO':
      	return {
        	...state,
          completed: !state.completed
        }
    	default:
      	return state;
    }
  }

  const todos = (state = [], action) => {
    switch (action.type) {
    	case 'ADD_TODO':
      	return [
        	...state,
          todo(undefined, action)
        ];
       case 'TOGGLE_TODO':
       	return state.map( t => {
        	if (t.id !== action.id) {
          	return t
          }
          return todo(t, action);
        });
      default:
      	return state;
    }
  };
  
  
  /* Tests */
  const testAddTodo = () => {
    const stateBefore = [];
    const action = {
      type: 'ADD_TODO',
      id: 0,
      text: 'Learn Redux'
    };
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(
      todos(stateBefore, action)
    ).toEqual(stateAfter);
  };

  const testToggleTodo = () => {
    const stateBefore = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      },
      {
        id: 1,
        text: 'Go shopping',
        completed: false
      }
    ];
    const action = {
      type: 'TOGGLE_TODO',
      id: 1
    };
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      },
      {
        id: 1,
        text: 'Go shopping',
        completed: true
      }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(
     ...