title: Adding Object to nested array in react-redux
body: <p>I found lot's of solutions online, but I've done my best for a week and found no way to solve it. I believe the fault to be the <strong>reducer ADD_GOAL</strong>, that is why i left it empty. </p>
  
  <p>Thanks alot! :)</p>
  
  <p>I want to add objects to the <strong>goals array</strong>. I always want to initialize goals empty, but I want to be able to add and remove objects freely. The idea is to save the objects like this.</p>
  
  <pre><code>{
    list: {
      '0': {
        id: 0,
        dueDate: 'By May 28th I Will have: ',
        goals: [
          {0: {...}
           1: {...}
           3: {...}
  }
        ]
      }
     '1':{
        id: 0,
        dueDate: 'By June 31st I Will have: ',
        goals: [
          {2: {...}
           4: {...}
    }
  }
  </code></pre>
  
  <h2>Reducer</h2>
  
  <pre><code>export default (state = {}, action) =&gt; {
    let copyList = [{ description: '213', aim: 12, progress: 2, percentage: 20 }];
    switch (action.type) {
      case 'ADD_DUEDATE':
        return { ...state, [action.payload.id]: action.payload }
      case 'ADD_GOAL':
        return {
  
        }
      case 'DELETE_TODO':
        return state.filter((item, index) =&gt; index !== action.payload)
      default:
        return state;
    }
  }
  </code></pre>
  
  <h2>Component</h2>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  class List extends React.Component {
    state = {
      id: 0,
      goalId: 0
    }
  
    createDueDate = () =&gt; {
      this.props.add({
        id: this.state.id,
        dueDate: "By May 28th I Will do something: ",
        goals: [{}]
      })
      this.setState({ id: this.state.id + 1 });
    }
  
    addGoal = () =&gt; {
      this.props.addToList({
        goals:
          [{ id: this.state.goalId, description: '213', aim: 12, progress: 2, percentage: 20 }]
      })
      this.setState({ goalId: this.state.goalId + 1 })
  
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;button className="btn btn-secondary" onClick={this.createDueDate}&gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;button className="btn btn-primary" onClick={this.addGoal}&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      list: state.list
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      add: (value) =&gt; {
        dispatch({ type: 'ADD_DUEDATE', payload: value })
      },
      get: (id) =&gt; {
        dispatch({ type: 'GET_DUEDATE', payload: id })
      },
      addToList: (value) =&gt; {
        dispatch({ type: 'ADD_GOAL', payload: value })
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(List);
  </code></pre>