title: add object to initial state in reducer
body: <p>I have my initial state:</p>
  
  <pre><code>export default function DrinkCalculator(state = initialState, action) {
  
    let payload = action.payload;
    switch (action.type) {
      case UPDATE_DRINKS_CALCULATOR:
      return [{
          ...state,
          ...payload
      }];
  case ADD_DRINK:
    let newState= [Object.assign({},state)];
  newState.push(action.payload);
  return newState;
  </code></pre>
  
  <p>How can I add to my array to hold an array of objects? How would I need to change my reducer to add an object to an array, so I can store lots of entries rather than just one.</p>
  
  <p>I would like my state to be:</p>
  
  <pre><code>[{
    drinkType: 5,
    drinkVolume: 4,
    drinkStrength: 5,
    drinkQuantity: 5,
    drinkStength: 5
  },
  {
    drinkType: 1,
    drinkVolume: 2,
    drinkStrength: 2,
    drinkQuantity: 5,
    drinkStength: 7
  },
  {
    drinkType: 3,
    drinkVolume: 5,
    drinkStrength: 2,
    drinkQuantity: 5,
    drinkStength: 5
  },
  {
    drinkType: 5,
    drinkVolume: 5,
    drinkStrength: 5,
    drinkQuantity: 5,
    drinkStength: 5
  }
  ]
  </code></pre>
  
  <p>Update: I am getting nested objects copied into my state, I would like to get the top level properties and add them as an object to the array.</p>
  
  <p>When I fire the action here:</p>
  
  <pre><code>onClick() {
  const drinkQuantity = this.state.counter;
  
  const drinks = this.props.DrinksCalculator;
  
  if (!drinkQuantity) {
      this.props.dispatch(showError());
  } else {
      this.props.dispatch(updateDrinksCalculator({drinkQuantity}));
  // fire addDrink to copy drinks props in new object
      this.props.dispatch(addDrink( drinks ));
  
      this.props.router.push('/calc/5');
  }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2vfyx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2vfyx.png" alt="enter image description here"></a></p>