title: Spread Operator not working for Redux/ES6 based sample
body: <p>I am trying to understand Redux online tutorials that are posted by Dan Abramov.
  At present I am on the following sample:</p>
  
  <p><a href="https://egghead.io/lessons/javascript-redux-reducer-composition-with-arrays" rel="noreferrer">Reducer composition with Arrays</a></p>
  
  <p>Here is my practice code following the above sample:</p>
  
  <pre><code>// Individual TODO Reducer
  const todoReducer = (state, action) =&gt; {
      switch(action.type) {
      case 'ADD_TODO':
          return {
              id: action.id,
              text: action.text,
              completed: false
            };
      case 'TOGGLE_TODO':
          if (state.id != action.id) return state;
  
        // This not working
        /*
        return {
          ...state,
          completed: !state.completed
        };
        */
  
        //This works
        var newState = {id: state.id, text: state.text, completed: !state.completed};
        return newState;
      default:
          return state;
    }
  };
  
  //TODOS Reducer
  const todos = (state = [], action) =&gt; {
          switch(action.type) {
          case 'ADD_TODO':
         return [
            ...state,
            todoReducer(null, action)
         ];
         case 'TOGGLE_TODO':
          return state.map(t =&gt; todoReducer(t, action));
        default:
          return state;
      }
  };
  
  //Test 1
  const testAddTodo = () =&gt; {
    const stateBefore = [];
  
    const action = {
        type: 'ADD_TODO',
        id: 0,
        text: 'Learn Redux'
    };
  
    const stateAfter = [{
       id: 0,
       text: "Learn Redux",
       completed: false
    }];
  
    //Freeze
    deepFreeze(stateBefore);
    deepFreeze(action);
  
    // Test
    expect(
       todos(stateBefore, action)
    ).toEqual(stateAfter);
  };
  
  //Test 2
  const testToggleTodo = () =&gt; {
    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
    }];
  
    //Freeze
    deepFreeze(stateBefore);
    deepFreeze(action);
  
    // Expect
    expect(
       todos(stateBefore, action)
    ).toEqual(stateAfter);
  };
  
  testAddTodo();
  testToggleTodo();
  console.log("All tests passed");
  </code></pre>
  
  <p>Issue is, within the todoReducer function, following syntax is not working:</p>
  
  <pre><code>return {
          ...state,
          completed: !state.completed
        };
  </code></pre>
  
  <p>I am using Firefox version 44.0 and it shows me following error in console:</p>
  
  <pre><code>Invalid property id
  </code></pre>
  
  <p>Now I guess my current version of Firefox must support Spread operator. 
  If anyway it does not, is there any way to add some standalone Polyfill to support this syntax?</p>
  
  <p>Here is also the <a href="https://jsfiddle.net/u9sez68h/2/" rel="noreferrer">JSFiddle</a></p>