title: Remove item from array in redux
body: <p>I am trying to add/remove items from an array using redux, the items will add to the array but when I try to remove an item, it looks like it is mutating the array and adding items instead of removing</p>
  
  <p>my State looks similar to this after trying to add/remove items</p>
  
  <p><code>[item1, item2, [item1, item2]]</code></p>
  
  <p>How can I remove items from my array?</p>
  
  <p><strong>state</strong></p>
  
  <p><code>state.filtered.cities: []</code></p>
  
  <p><strong>Filter.js</strong></p>
  
  <pre><code>import React from 'react'
  import styled from 'styled-components'
  import { connect } from 'react-redux'
  import * as actions from './actions'
  
  class Filter extends React.Component {
  
    handlecity = (city) =&gt; {
      this.props.addCity(city)
    }
  
    handleRemoveCity = (city) =&gt; {
      this.props.removeCity(city)
    }
  
  
  
    render() {
  
      const options = [
     'item1','item2'
      ]
  
      return(
        &lt;Wrap&gt;
          {options.map((option,index) =&gt;
            &lt;Cell&gt;
              &lt;OptionWrap key={index} onClick={()=&gt; this.handlecity(option)}&gt;
                {option}
              &lt;/OptionWrap&gt;
              &lt;OptionWrap key={index} onClick={()=&gt; this.handleRemoveCity(option)}&gt;
                remove {option}
              &lt;/OptionWrap&gt;
              {console.log(this.props.city &amp;&amp; this.props.city)}
            &lt;/Cell&gt;
          )}
        &lt;/Wrap&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; ({
    city: state.filtered.cities
  })
  
  const mapDispatchToProps = {
    ...actions,
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Filter);
  </code></pre>
  
  <p><strong>actions.js</strong></p>
  
  <pre><code>import {
    ADD_CITY, REMOVE_CITY
  } from '../../Constants'
  
  export function addCity(city) {
    return {
      type: 'ADD_CITY',
      city
    }
  }
  
  export function removeCity(city) {
    return {
      type: 'REMOVE_CITY',
      city
    }
  }
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>import {
    ADD_CITY, REMOVE_CITY
  } from '../Constants';
  
  const cityReducer = (state = [], action) =&gt; {
    switch (action.type) {
      case ADD_CITY:
        return [
          ...state,
          action.city
        ]
      case REMOVE_CITY:
        return [
          ...state,
          state.filter(city =&gt; city !== action.city),
        ]
      default:
        return state;
    }
  }
  
  export default cityReducer;
  </code></pre>