title: Deleting an item from my redux state gives multiple errors
body: <p>I am having 2 issues:</p>
  
  <ol>
  <li><p>Initially I can add clients to the empty array through action creators and my reducer. However, whenever I delete the items from the list and try to add new clients to it, it gives me an error: TypeError: Invalid attempt to spread non-iterable instance.</p></li>
  <li><p>When I said I am deleting the items, what really happens is I create the clients, and then when I click on the delete button next to one of them, all of the clients delete. There is not error in the console, but I just want to delete the specific client with the corresponding id. </p></li>
  </ol>
  
  <p>Here is my code! </p>
  
  <p>Clients.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import AddClient from './AddClient'
  import {connect} from 'react-redux'
  import {deleteClient} from '../../store/actions/clientActions'
  
  class Clients extends Component {
  
    handleClick = (id) =&gt; {
      console.log(id)
      this.props.deleteClient(id)
    }
  
    render() {
      const {clientList} = this.props
      return (
        &lt;div className="container mt-5"&gt;
          &lt;h2&gt;Here Are Your List of Clients...&lt;/h2&gt;
          {clientList &amp;&amp; clientList.map(client =&gt; {
            return(
              &lt;div key={client.id}&gt;
                &lt;div&gt;
                  Client Name: {client.name} | Client Price: {client.price}
                  &lt;button onClick={() =&gt; {this.handleClick(client.id)}}&gt;Delete&lt;/button&gt;
                &lt;/div&gt;      
              &lt;/div&gt;
            )
          })}
          &lt;AddClient/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      clientList : state.clients.clientList,
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return{
      deleteClient : (id) =&gt; dispatch(deleteClient(id)) 
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Clients)
  </code></pre>
  
  <p>Actions: </p>
  
  <pre><code>export const addClient = (client) =&gt; {
      return(dispatch, getState) =&gt; {
          dispatch({type: 'ADD CLIENT', client})
      }
  }
  
  export const deleteClient = (id) =&gt; {
      return(dispatch, getState) =&gt; {
          dispatch({type: 'DELETE CLIENT', id})
      }
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>const initState = {
      clientList: []
  }
  
  const clientReducer = (state = initState, action) =&gt; {
      switch (action.type) {
          case 'ADD CLIENT' : 
              action.client.id = Math.random();
              let clientList =  [...state.clientList, action.client];
              clientList.sort((a, b) =&gt; a.name.localeCompare(b.name));
              return {
                  clientList
              };
  
          case 'DELETE CLIENT' :
              const id = action.id;
              clientList = state.clientList.filter(client =&gt; 
                  {return client.id !== id});
              return clientList;
  
          default : return state;
      }
  }
  
  export default clientReducer
  </code></pre>
  
  <p>Lastly, this is AddClient.js </p>
  
  <pre><code>import React, { Component } from 'react'
  import {connect} from 'react-redux'
  import {addClient} from '../../store/actions/clientActions'
  
  class AddClient extends Component {
    state = {
      id: null,
      name: null,
      price: null,
    }
  
    handleChange = (e) =&gt; {
        this.setState({
            [e.target.id] : e.target.value
        })
    } 
  
    handleSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.addClient(this.state);
      e.target.reset();
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit} className="mt-5"&gt;
              &lt;h3&gt;Add a new client:&lt;/h3&gt;
              &lt;label htmlFor="name"&gt;Client Name: &lt;/label&gt;
              &lt;input type="text" id="name" onChange={this.handleChange}/&gt;&lt;br/&gt;
              &lt;label htmlFor="price"&gt;Client Price: &lt;/label&gt;
              &lt;input type="text" id="price" onChange={this.handleChange}/&gt; &lt;br/&gt;
              &lt;button className="btn btn-primary"&gt;Add Client&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      addClient: (client) =&gt; dispatch(addClient(client))
    }
  }
  
  export default connect(null, mapDispatchToProps)(AddClient)
  </code></pre>
  
  <p>Thank you for all the help, I am fairly new to React and Redux. Let me know if there is any other code you would like to see. </p>